Components

Triggers an action in place — submit, save, confirm, open a dialog.

Attaches related buttons into one segmented cluster, and hosts the split button.

A two-state on/off button for a formatting mark, view option, or setting.

A group of toggle buttons acting as one single- or multi-select control.

A semantic, roving-focus strip of related controls — one tab stop, arrow-key navigation, and measured overflow that collapses out-of-space actions into a menu.

A single-value pick-to-change control styled as a Badge — a tinted lozenge whose tone follows the selected option, opening a single-select list to change the value.

A smart, self-constraining month-grid date picker (single, multiple, or range) built on react-day-picker. Owns first-class constraints (min/max/unavailable + clamped nav), fast navigation (dropdown captions or a grid drill-down), range preview feel, a `size` axis, per-day indicator dots, and an opt-in Today footer.

A binary (or indeterminate) choice, typically submitted with a form.

A searchable single-select — a field-styled trigger that opens a Popover with a cmdk search box and a filtered listbox. Accent-insensitive matching, grouped + rich options, a data-driven options prop, async/loading, opt-in free-text create, a clear control, and an aria-live result-count announcer.

A date field you can both type into and pick from a calendar — format-driven, with a native Date value. Ships a DateRangePicker sibling for ranges.

A combined date + time field — a calendar and a time field in one popover, with a single Date value.

Pairs a control with a label and optional description, as a row or a card.

A drag-and-drop file intake surface for business documents — résumés, attachments, deal-room docs. Accessible-first (a real, keyboard-operable file input; drag is progressive enhancement) and transport-agnostic (it owns file state, validation, and per-item status/progress display — the consumer drives the actual upload and reports progress back through a controlled `files` array). Typed rejections (type/size/count/totalSize/duplicate), directory drop, a running total, retry/remove, and drag-reorder — with rows composed from List + per-row Progress.

An agent-native filter system — a headless `useFilters<T>` engine plus a `FilterBar` of editable `field · operator · value` pills, where the operator set is derived from each field's type so impossible queries can't be authored. Ships type-dispatched value editors, faceted counts, a rolling-vs-calendar relative-date engine, nested AND/OR groups, saved views, URL round-trip, a natural-language Ask bar, and a `FilterApi` handle an agent or MCP tool can drive.

React Hook Form scaffolding that wires labels, controls, descriptions, and validation messages.

Edit a value in place — a value that reads as plain text until you touch it, then becomes a real field. Compound Preview ⟷ Control with click/focus/dblclick activation, quiet or explicit commit, validation, dirty-check, optimistic updates, async save, and a swappable typed control.

A single-line text field — with optional in-field leading/trailing slots and built-in clear, password-reveal, and loading affordances.

A segmented input for short fixed-length codes (one-time passwords, 2FA, PINs).

An accessible caption that names a form control.

A multi-value / tag input — an editable field-surface holding several values as removable chips, with a searchable stay-open listbox, per-option chip tone, opt-in free-text tags (Create row, paste + delimiter tokenize, dedupe), a per-token validation lifecycle, a max cap, and a '+N' overflow reveal.

A typed numeric input — Intl-formatted (decimal/currency/percent/unit) with a stepper, spinbutton a11y, and a raw number value.

Choose exactly one option from a small set of visible choices.

A star/score control for collecting or displaying a rating.

Choose one option from a list, presented in a popover.

A draggable track for choosing a number or a range.

An instant on/off toggle for a single setting.

A multi-line text field for longer freeform input.

A typed time input — format-driven, with Arrow-key stepping and a native Date value.

A time field with a scrollable list of selectable time slots — the booking-UI pattern.

Shows the current page's place in the hierarchy with links back to its ancestors.

A desktop-style horizontal bar of pull-down menus.

Primary site navigation with optional dropdown panels.

Page-by-page navigation across a long, splittable set of results.

Guide a user through an ordered, often-gated process — showing where they are, what's done, and what's left.

Switch between a few peer views in place, showing one panel at a time.

A modal that interrupts to force an explicit confirm/cancel decision.

An agent-native ⌘K command palette — a searchable, keyboard-first list that navigates nested sub-command pages, handles async loading / error / empty states, ranks recents, binds per-item shortcuts that actually fire, and opens a per-row action panel on → / ⌘.. CommandDialog is the canonical host (⌘/Ctrl + optional `/` open-shortcut, controllable open, imperative apiRef).

A menu of actions opened by right-click or long-press on a target.

A modal surface that interrupts the flow for a focused task or message.

A bottom sheet that slides up and can be swiped to dismiss — mobile-first.

A menu of actions and toggles launched from a button.

A floating card of preview detail shown on hover/focus of a trigger.

Non-modal floating content anchored to a trigger — rich detail or a small form.

A panel that slides in from a screen edge for a secondary task or navigation.

A small text hint shown on hover or focus to clarify a control.

Stacked, collapsible sections that show one panel's content at a time (or several).

A single region that expands and collapses.

An inline banner that calls out a status or important message.

A centered empty-state surface — no results, first-run, or a cleared list.

A determinate bar showing how far a known-length task has advanced.

A pulsing placeholder that preserves layout while content loads.

Transient, stacking notifications fired imperatively with toast().

An animated indicator for an indeterminate loading state.

A grid of intensity-shaded cells showing activity or frequency over time (a contribution graph).

An identity avatar — circle / square / hexagon, with presence & status indicators, a name + detail AvatarItem, and overlapping AvatarGroups.

A static, inline label for a status, count, or short piece of metadata.

A ranked list of label/value rows, each backed by a bar sized to its share of the max.

A Kanban / column board — records grouped into ordered columns where a drag is a field mutation (onCardMove). Composes the `sortable` primitive for all drag (pointer, keyboard, touch, cross-column, overlay ghost, announcements) and adds column headers with a live count + accent tone, WIP limits, collapse-to-rail, swimlanes, an inline card composer, and empty/loading states. Data-driven or composable, controlled or uncontrolled.

A compact measure-vs-target readout: a value bar over qualitative range bands with a target marker.

A horizontally or vertically scrolling set of slides with prev/next controls.

Token-themed chart primitives (container, config, tooltip, legend, data-table) composed with Recharts.

A compact numeric count pill — notification totals and unread counts, with a 99+ overflow cap and an animated digit roll.

The read-only 'field: value' detail block — a real description list (<dl>/<dt>/<dd>) for demographics, order summaries, settings recaps, and entity metadata. Three responsive orientations, a token-driven label column, dividers, graceful empty values, truncation, and an opt-in copy affordance.

A masonry / justified / uniform thumbnail grid — a real layout engine plus a zero-CLS lazy-media pipeline, a view-agnostic multi-select model (click · shift-range · marquee · keyboard), a built-in lightbox, FLIP re-layout motion, drag-reorder, and windowed virtualization for large asset libraries.

A horizontal roadmap / Gantt canvas — entity rows × a zoomable time axis with editable bars, milestones, rolled-up summaries, dependency arrows and a critical path.

A radial dial for a single value — with threshold zones, an optional needle, ticks, and a target.

A value matrix — rows × columns of cells tinted by value — rendered as a navigable table.

Displays a keyboard key or shortcut as a keycap.

A general-purpose content list — a stack of peer item rows (leading media · title/description · trailing meta/actions) for settings, inbox/notification feeds, file lists, search results, and resource lists. Terse or composed items, surfaces & dividers, grouped sections, truncation, expandable rows, per-row status/unread/tone, and three selection models (navigational overlay, a keyboard GridList for multi-select, a radiogroup for single) with select-all, range, and a bulk-action bar.

The foundational drag-and-drop reorder primitive — a zero-dependency, accessible engine that makes any collection reorderable: a single vertical/horizontal list, a wrapping 2D grid, or a Kanban board (cross-container). Keyboard drag mode and screen-reader announcements come for free; edge auto-scroll, a touch long-press sensor, a drop indicator, and multi-item drag are built in. A `useSortable` hook wires the same engine into List, Tree, and Table.

A compact, inline trend line/area/bar — a chart small enough to sit in a sentence or a tile.

The KPI / metric tile a dashboard opens with — a labelled number with an optional sentiment-aware delta, an icon, a description, and a chart-agnostic trend slot. Terse one-liner or full slot composition; Stat.Group lays a responsive row of tiles.

A styled, semantic data table — primitives plus smart parts for sorting, row selection, sticky/pinned columns, column resize, empty/loading states, and pagination.

Removable and selectable chips — dismissable filter tokens and pick-to-toggle option chips, with TagGroup coordinating roving-keyboard selection and removal across a set.

A read-only chronology — activity feed, audit log, order/shipment history, changelog, or status thread. A toned-marker rail of ordered events with terse or fully-composed items, grouped day headers, a live pending tail, alternating layout, and a collapsible body.

A strip of tone-coloured blocks showing a status history — uptime, SLA, or health over time.

An arbitrary-depth hierarchical tree — recursive expand/collapse nodes with roving-tabindex keyboard navigation (WAI-ARIA Tree View), for file explorers, folder/nav sidebars, and threaded or org structures. Terse or composed items, selection (single / multiple with range + ⌘A), tri-state checkbox cascade, filter-to-reveal with highlighting, scroll-to-node, async lazy children, and inline rename.

The page-level application frame — a tinted canvas with a sidebar, content panel, and optional detail aside.

Constrains content to a fixed width:height ratio that scales with its container.

A bordered surface that groups related content and actions into one unit.

Split panels the user can drag to resize, horizontally or vertically.

A day/week/month/agenda event-grid — a time-canvas that positions, packs and edits events, with timezone/DST-correct math and recurrence.

A height-constrained region with a styled, cross-browser scrollbar.

A thin rule that divides content into groups.