# Mizen UI

React components with documented APIs, accessible anatomy, and local examples.

## Getting started

- [Mizen consumer skill](/skills/mizen-ui/SKILL.md): Instructions for composing existing components. Reviewed anatomy and client boundaries: /docs/components/<slug>/metadata. Unreviewed contracts omit those fields.
- [Introduction](/docs/introduction/markdown): A React component library for product interfaces, with fixed defaults, closed styling, and docs that agents can read.
- [Installation](/docs/installation/markdown): Use the release-candidate archive and its compiled stylesheet in Next, TanStack Start, or React + Vite.
- [CLI](/docs/cli/markdown): Find components, inspect application setup, and preview changes before applying them.
- [Styling](/docs/styling/markdown): How Mizen's closed styling works, and how to style what your app owns.
- [Foundations](/docs/foundations/markdown): Use typography and rhythm first, with neutral workareas and restrained wine selection.
- [Theming](/docs/theming/markdown): Bootstrap the root theme before content, then synchronize the user's preference.
- [Composition](/docs/composition/markdown): Build tasks from existing components with explicit state, labels, and client boundaries.
- [Integrations](/docs/integrations/markdown): Use the existing form, table, and chart contracts. Keep application transport explicit.
- [Accessibility](/docs/accessibility/markdown): What Mizen components guarantee, what your app owns, and what has been verified.
- [For agents](/docs/for-agents/markdown): Give a coding agent Mizen's docs as Markdown, so it uses real components and APIs instead of guessing.

## Hooks

- [useCopyToClipboard](/docs/use-copy-to-clipboard/markdown): Copies text to the clipboard and reports whether it worked, so a button can show a check and screen readers hear the result.

## Workflow examples

- [Analytics workspace](/internal/specimens#analytics-workspace-example)

## Layout

- [Accordion](/docs/components/accordion/markdown): Reveals related content with clear heading hierarchy and optional separating panels.
- [Aspect Ratio](/docs/components/aspect-ratio/markdown): Reserves a fixed proportion for media with native CSS.
- [Card](/docs/components/card/markdown): Groups related content and actions in a bordered surface with structural, native-link, and dedicated form-selection compositions.
- [Collapsible](/docs/components/collapsible/markdown): Toggles the visibility of secondary content with animated height transitions.
- [Frame](/docs/components/frame/markdown): Composes a frame from header, panel, title, description, and footer slots with system-owned surfaces and spacing.
- [Grid](/docs/components/grid/markdown): Arranges related content in a responsive grid with system-owned spacing.
- [Group](/docs/components/group/markdown): Clusters compact peer controls with centered alignment and system-owned spacing.
- [Inline](/docs/components/inline/markdown): Arranges related content horizontally with wrapping and system-owned spacing.
- [Scroll Area](/docs/components/scroll-area/markdown): Native-feel scroll container with custom scrollbars, edge fading, and overscroll containment.
- [Section](/docs/components/section/markdown): Arranges related content in a section with system-owned spacing.
- [Separator](/docs/components/separator/markdown): Separates related content with a system-owned horizontal divider.
- [Spacer](/docs/components/spacer/markdown): Fills available flex space between peer controls.
- [Stack](/docs/components/stack/markdown): Arranges related content vertically with system-owned spacing.
## Typography

- [Blockquote](/docs/components/blockquote/markdown): Groups a quotation with attribution outside the quoted text.
- [Citation](/docs/components/citation/markdown): Marks a work title while preserving surrounding text size.
- [Code](/docs/components/code/markdown): Marks inline code and technical identifiers with a readable mono treatment.
- [Heading](/docs/components/heading/markdown): Renders accessible section headings with independent semantic and visual levels.
- [Kbd](/docs/components/kbd/markdown): Displays keyboard keys and grouped shortcuts with fixed native kbd anatomy.
- [Label](/docs/components/label/markdown): Names a form control with a native accessible association.
- [Link](/docs/components/link/markdown): Renders a native inline anchor with the system link treatment.
- [Text](/docs/components/text/markdown): Renders accessible body paragraphs with consistent typographic scale and wrapping.
- [Visually Hidden](/docs/components/visually-hidden/markdown): Keeps content available to assistive technology while visually clipping it.
## Actions

- [Button](/docs/components/button/markdown): Triggers an action with clear hierarchy and tactile feedback.
- [Button Group](/docs/components/button-group/markdown): Connects existing buttons while preserving native Tab navigation.
- [Toggle](/docs/components/toggle/markdown): Switches a command or formatting option on and off.
- [Toggle group](/docs/components/toggle-group/markdown): Combines related toggles into one control surface.
- [Toolbar](/docs/components/toolbar/markdown): Groups actions and controls with one Tab stop and arrow-key navigation.
## Forms

- [Calendar](/docs/components/calendar/markdown): Renders accessible single and range date selection with month navigation, disabled bounds, and locale-aware formatting.
- [Checkbox](/docs/components/checkbox/markdown): Selects independent options with optional card presentation.
- [Checkbox group](/docs/components/checkbox-group/markdown): Coordinates related checkbox values and parent selection.
- [Combobox](/docs/components/combobox/markdown): Combines a text input with an anchored popup list for filtering and selecting values.
- [Date picker](/docs/components/date-picker/markdown): Combines an editable ISO date input with an integrated Calendar popover, strict constraint validation, and keyboard interaction.
- [Date range picker](/docs/components/date-range-picker/markdown): Combines an editable ISO date-range input with a calendar popover, optional presets, and range constraints.
- [Date-Time Input](/docs/components/date-time-input/markdown): A native local date and time input without implicit timezone conversion.
- [Field](/docs/components/field/markdown): Connects labels, controls, help text, and validation.
- [Fieldset](/docs/components/fieldset/markdown): Groups related form controls and labels under a shared accessible legend.
- [File Upload](/docs/components/file-upload/markdown): Uploads files via drag-and-drop or system file picker with validation, status presentation, and removal. Applications own transport and retries.
- [Form](/docs/components/form/markdown): Orchestrates form state, validation, focus management, and async submission.
- [Input](/docs/components/input/markdown): Captures a single line of text with quiet depth.
- [Input group](/docs/components/input-group/markdown): Composes inputs and textareas with contextual prefixes, suffixes, and actions.
- [Number field](/docs/components/number-field/markdown): Captures and formats numeric input with stepping, bounds, and scrub interactions.
- [OTP Field](/docs/components/otp-field/markdown): Captures multi-slot one-time passwords and verification codes with keyboard and paste coordination.
- [Radio group](/docs/components/radio-group/markdown): Chooses one option from a related set.
- [Select](/docs/components/select/markdown): Chooses a value from a compact anchored list.
- [Slider](/docs/components/slider/markdown): Selects numeric values or ranges along a bounded track.
- [Switch](/docs/components/switch/markdown): Changes a setting that takes effect immediately.
- [Textarea](/docs/components/textarea/markdown): Captures longer text with deliberate resize behavior.
- [Time Input](/docs/components/time-input/markdown): A native local time input with the shared Input appearance.
## Navigation

- [Breadcrumb](/docs/components/breadcrumb/markdown): Shows the path to the current resource using native links.
- [Menubar](/docs/components/menubar/markdown): Adds horizontal or vertical keyboard navigation across composed menus.
- [Navigation Menu](/docs/components/navigation-menu/markdown): Provides a responsive site navigation menu with managed popup behavior and framework links.
- [Pagination](/docs/components/pagination/markdown): Navigates between pages with native links and a clear current page.
- [Segmented Control](/docs/components/segmented-control/markdown): Presents a clearable single-selection mode using native ToggleGroup keyboard behavior.
- [Stepper](/docs/components/stepper/markdown): Shows ordered progress while the application owns workflow state and actions.
- [Tabs](/docs/components/tabs/markdown): Moves between related views without losing context.
## Overlays

- [Alert dialog](/docs/components/alert-dialog/markdown): Interrupts with critical context and confirms a single action.
- [Command](/docs/components/command/markdown): Fast, composable command menu and palette with keyboard navigation and filtering.
- [Context Menu](/docs/components/context-menu/markdown): Presents contextual actions and choices anchored to pointer coordinates or long press.
- [Dialog](/docs/components/dialog/markdown): Focuses a short task above the current page with managed focus.
- [Drawer](/docs/components/drawer/markdown): Presents an edge-anchored gesture-driven sheet with smooth touch dragging and snap points.
- [Menu](/docs/components/menu/markdown): Presents compact actions, choices, and nested commands.
- [Popover](/docs/components/popover/markdown): Places focused interactive content beside a trigger.
- [Preview Card](/docs/components/preview-card/markdown): Non-modal progressive enhancement presenting supplementary preview content.
- [Sheet](/docs/components/sheet/markdown): Extends dialog overlays with edge-anchored directional sliding panels for complex flows and settings.
- [Tooltip](/docs/components/tooltip/markdown): Adds concise supplementary context on hover or focus.
## Feedback

- [Alert](/docs/components/alert/markdown): Communicates important status messages with semantic variants, optional action slots, and accessible roles.
- [Badge](/docs/components/badge/markdown): Marks concise content with semantic variants and optional polymorphic rendering.
- [Empty](/docs/components/empty/markdown): Communicates empty, zero-data, or filtered-out views with media, heading, description, and action slots.
- [Error State](/docs/components/error-state/markdown): Communicates retryable load failures, connection drops, or missing resources with destructive media, heading, description, and action slots.
- [Meter](/docs/components/meter/markdown): Displays a measurable value within a known range with native meter semantics.
- [Progress](/docs/components/progress/markdown): Visualizes task completion progress or indeterminate background activity.
- [Skeleton](/docs/components/skeleton/markdown): Displays a synchronized shimmer placeholder for loading content.
- [Spinner](/docs/components/spinner/markdown): Shows that work is in progress: thinking, running, or typing a reply.
- [Status dot](/docs/components/status-dot/markdown): Shows a fixed, system-owned status dot with an accessible label.
- [Toast](/docs/components/toast/markdown): Displays temporary accessible status feedback with action triggers, viewport stacking, and anchored positioning.
## Data

- [Activity Feed](/docs/components/activity-feed/markdown): Displays chronological events with native list and time semantics.
- [Avatar](/docs/components/avatar/markdown): Renders a user avatar image with consumer-provided fallback content.
- [Avatar Group](/docs/components/avatar-group/markdown): Clusters overlapping avatars with inherited sizing and consumer-supplied children.
- [Data Table](/docs/components/data-table/markdown): A TanStack Table integration for sorting, paging, and optional row virtualization.
- [List](/docs/components/list/markdown): Composes a named native list with separate record content and trailing actions.
- [Metric](/docs/components/metric/markdown): Displays a key metric with label, tabular numeric value, and description slots.
- [Overflow List](/docs/components/overflow-list/markdown): Shows a bounded set of items and reveals the rest in a popover.
- [Property List](/docs/components/property-list/markdown): Displays label and value pairs with semantic definition list layout.
- [Table](/docs/components/table/markdown): Composes native table markup inside a named scroll region; the application owns its records and calculations.
- [Token](/docs/components/token/markdown): Displays colored tags, categories, links, or removable selections.
- [Tree](/docs/components/tree/markdown): Browses hierarchical resources with keyboard navigation and optional single-item selection.
## Charts

- [Area Chart](/docs/components/area-chart/markdown): Plots several series over time as stacked, overlapping, or 100% areas, with one tooltip listing every series at the hovered time.
- [Bar List](/docs/components/bar-list/markdown): Ranked rows whose background bar shows each value against the largest, with the label on the bar and the value at the end.
- [Calendar Heatmap](/docs/components/calendar-heatmap/markdown): A grid of days, one column per week, shaded by each day's value, with month labels and a table of values.
- [Category Comparison](/docs/components/category-comparison/markdown): Compares signed category values around an explicit zero baseline.
- [Chart Frame](/docs/components/chart-frame/markdown): A responsive, accessible host for typed TanStack Charts definitions.
- [Chart Legend](/docs/components/chart-legend/markdown): A static, wrapping legend that shares chart series colors.
- [Chart Tooltip](/docs/components/chart-tooltip/markdown): Semantic tooltip content composed inside the chart engine's interaction surface.
- [Distribution](/docs/components/distribution/markdown): Counts caller-provided numeric observations in equal-width bins across an explicit domain.
- [Funnel](/docs/components/funnel/markdown): Conversion stages as bars on a shared track, each with its value and its share of the first stage.
- [Heatmap](/docs/components/heatmap/markdown): Compares labeled matrix values with a theme-aware color scale and exact accessible data table.
- [Metric Trend](/docs/components/metric-trend/markdown): Composes a metric card: label, value, change chip, and an optional chart. Without a chart it is a stat card.
- [Part-to-Whole](/docs/components/part-to-whole/markdown): Shows caller-ordered non-negative parts as a labeled whole, with a complete legend and safe normalization.
- [Progress Rings](/docs/components/progress-rings/markdown): Up to three concentric rings, each showing progress toward its own goal, with value tiles.
- [Radar Chart](/docs/components/radar-chart/markdown): Up to three profiles across three to eight measures that share one scale, with a tooltip per axis.
- [Radial Bars](/docs/components/radial-bars/markdown): Up to six concentric bars, largest outermost, with each item's exact value in a tile.
- [Sankey Chart](/docs/components/sankey-chart/markdown): Flows from up to six sources to their targets, one ribbon per link, with totals, shares, and a table of flows.
- [Scatter Chart](/docs/components/scatter-chart/markdown): Compares two numeric measures with keyboard-accessible points and an exact data table.
- [Score Gauge](/docs/components/score-gauge/markdown): A score built from parts: a segmented ring around the total, with each part's points listed below.
- [Time Series](/docs/components/time-series/markdown): Plots values against a UTC time scale with gaps and formats values on axes and tooltips.
## Diagrams

- [Diagram](/docs/components/diagram/markdown): Explains workflows, messages, relationships, and lifecycle transitions using Mermaid text.
## Content

- [Attachment](/docs/components/attachment/markdown): Composes file media, name, metadata, and optional native actions.
- [Carousel](/docs/components/carousel/markdown): Browses a horizontal sequence with native scrolling and labeled controls.
- [Code Block](/docs/components/code-block/markdown): Presents named code samples with accessible preformatted text and an optional copy action.
- [Lightbox](/docs/components/lightbox/markdown): Opens an image fullscreen, frameless on a dark scrim, with Close in the corner.
- [Markdown](/docs/components/markdown/markdown): Gives rendered Markdown Mizen's reading layout and element styling, with any parser.
- [Thumbnail](/docs/components/thumbnail/markdown): Displays a square native image with a finite system size.
- [Timestamp](/docs/components/timestamp/markdown): Formats a timezone-bearing instant while preserving native time semantics.
## Agentic

- [Agent Thinking](/docs/components/agent-thinking/markdown): Shows a model working before it answers: the current step, the sources it reads, and its reasoning, folding into Thought for Ns.
- [Approval Card](/docs/components/approval-card/markdown): The agent asks before it acts: what it will do, why, and the details, with Deny and Approve. Denying can tell the agent what to do instead, and a decision folds into one line.
- [Composer](/docs/components/composer/markdown): Composes plain-text or rich drafts with mentions, slash actions, toolbar pickers, attachments, a working state, and one submission policy.
- [Conversation](/docs/components/conversation/markdown): The thread with the agent: turns that scroll and follow the reply, an empty state, the composer docked under them, and an optional rail to jump between questions.
- [Inline Citation](/docs/components/inline-citation/markdown): A source in the sentence it supports: the site's favicon and name, opening the page. On hover or focus it previews the title and what the page says.
- [Message](/docs/components/message/markdown): One turn in a conversation. The person's message is a bubble with Copy, Edit, and the time; the agent's turn holds its thinking, tool calls, and reply.
- [Message Scroller](/docs/components/message-scroller/markdown): A scrolling transcript that opens at the end, follows new content while the reader is there, settles a sent turn near the top, and holds the reader's place when earlier messages load.
- [Question Card](/docs/components/question-card/markdown): The agent asks the person to choose, one question at a time: options with number keys, an answer in their own words, and Skip. Once answered, it folds into one line.
- [Sources](/docs/components/sources/markdown): The pages and documents an agent used for a reply, folded into one line with their favicons and a count. It opens to a link for each.
- [Streaming Text](/docs/components/streaming-text/markdown): Shows a reply as it streams: new words arrive in a fading color trail, citations sit inline, then actions, sources, and follow-ups appear.
- [Suggestion](/docs/components/suggestion/markdown): Prompts the person can send in one click, as a row of pills above the composer. The row stays one line, scrolling sideways with faded edges.
- [Task List](/docs/components/task-list/markdown): The steps an agent plans and how far it has got. It can ask before the agent starts, marks the step in progress, and folds into a summary when every step is done.
- [Terminal](/docs/components/terminal/markdown): A shell command the agent runs, as one line: what it ran, how long it took, and how it ended. It opens to the output, which streams in with the newest line in view.
- [Tool Call](/docs/components/tool-call/markdown): Shows an agent's tool call as one line that opens to its arguments and result, with Retry on errors and Approve or Deny when a call needs a person.