Components

Primary, secondary, destructive, and quiet actions with pending spinner.

Labeled text input with description and validation error slots.

Search input with icon and clear button.

Labeled multiline input with description and validation error slots.

TextArea whose trigger character opens a filtered suggestion list; picking one writes the mention at the caret. Reach for it over TextArea when the prose has to name records the app knows about — people, companies, saved assets — and you need the pick as data, not just the typed string.

Numeric input with increment and decrement steppers.

Single checkbox with indeterminate state; CheckboxGroup for labeled sets.

Labeled group of checkboxes with shared description and validation.

Single-choice group, vertical or horizontal.

On/off toggle with label, description, and validation slots.

Single or range slider with live output value.

Picker over a dropdown listbox; SelectItem and SelectSection for options.

Autocomplete input over a filtered listbox.

Stacked form wrapper wiring React Aria validation.

Segmented date input; TimeField for times.

Segmented time input on the DateField chassis.

Month grid with keyboard navigation; RangeCalendar for spans.

Two-ended month grid selecting a contiguous span.

Date field with a calendar popover.

Start and end date fields with a range calendar popover.

Generic surface: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

Static status pill with semantic color variants.

Inline callout with icon slot, title, and description; status variants.

Pulsing placeholder for a layout whose shape you already know, so nothing jumps when the data lands. SkeletonLine, SkeletonCircle and SkeletonText compose it; SkeletonCardList, SkeletonTable, SkeletonRows, SkeletonToolbar and SkeletonPanel are the whole shapes. Wrap a region in SkeletonBlock so it announces itself once instead of not at all. Stops animating under reduce-motion.

The wait for something whose shape you do not know yet — a submit, a panel fetching. Prefer Skeleton when the layout is known, and Shimmer for a model working in a transcript. Same arc as Loader and Button's pending state.

Keyboard key cap; KbdGroup for chords.

Locks a child to a ratio; images and videos cover the box.

Media / content / actions row primitive for lists and settings.

Attaches adjacent buttons into one segmented control.

Pressable on/off button; ToggleButtonGroup for single or multiple selection.

Groups ToggleButtons with shared selection.

Determinate or indeterminate progress with label and value.

Gauge that shifts success → warning → destructive as it fills.

Sonner underneath, our markup on top: it owns the stack, the timers and the announcements; we own every pixel. Mount ToastRegion once at the app root and call toast() from anywhere. Five tones, each a pastel wash of its own colour stirred into the app's cream — default, success, destructive, info, and loading, which spins and should usually be given no timeout.

Side panel over a scrim; Drawer is the bottom placement.

Blocking confirm dialog with cancel and confirm actions.

Sortable, selectable, resizable data grid: Table, TableHeader, Column, TableBody, Row, Cell.

Page controls with sibling window and gaps.

React Aria breadcrumb trail; the layout Breadcrumbs stays the data-driven server-safe one.

One number, named: label, auto-compacted value, optional delta and hint. The right form when a measure has no shape worth drawing.

Collapsible app rail: provider, header, groups, menu buttons with injected links, nested sub-menus that fly out once collapsed, badges, off-canvas below the mobile breakpoint, trigger, inset.

The app's stable frame: brand, destinations with a shared active pill, search, and the account, the same on every page. `inset` sits over the page beside a sidebar card; `full` spans the window with the sidebar below it. Sets --topbar-row-h, --tabstrip-h and their sum as CSS variables, so a second row costs no measurement and no re-render.

Browser-style tabs for the top bar's second row. Each tab is a remembered location rather than a document; a pinned tab shrinks to its glyph and shows no close control, and middle-click closes.

The rail's other half: a sticky bar across the content column carrying where you are on the left, and on the right the tools that are the same on every page — search, icon actions with badges, then the account. Pairs with SidebarInset; it does not span the rail.

Failed to load graph object 42
digest a1b2c3

Page or inline failure surface: title, detail, error message and digest, retry and home actions.

One full-bleed line about the whole session, not the page — impersonation, an unreachable backend, a job still running. Alert is the in-page box; this is the strip under the top bar. Dismissible only if you pass onDismiss.

Loading, empty, error or the thing itself, decided once from a Query status. A failure always outranks emptiness, so a list never claims to be empty when the request actually failed. Wraps children in an ErrorBoundary.

Catches render errors below it and shows ErrorState with a reset; resetKeys clear it.

The 404 preset of ErrorState, muted tone.

The offline preset of ErrorState; useOnline() reports connectivity.

Embla-powered slides with previous/next controls and arrow-key navigation.

Recharts inside a tokenized container: chart-1…5 colors, tooltip and legend in contract tokens.

TanStack Table over the React Aria Table: column defs, sorting, optional pagination.

Virtualized table over an infinite query: server-driven sort, scroll-to-load-more, disclosure rows, loading/empty/error states.

Column-header filter popover for text, facets, numbers, and dates. The host owns the applied value; the button shows whether the column is filtered.

A number that tweens to its new value when it changes; still under reduced motion.

One-time-code input with slots, groups, and separators.

Draggable panel groups with an optional grip handle.

Right-click menu anchored at the pointer; a Menu in a Popover, so keyboard users get it via the item's own actions.

Toolbar of menu triggers with arrow-key movement between menus.

Site nav with plain links and popover panels; panel links carry a title and description.

Rich hover/focus card on the Tooltip chassis — non-interactive content by design.

Tab list with panels.

Tags with semantic colors, selection, and removal.

Dropdown menu with sections, submenus, and shortcuts.

Centered modal over a blurred scrim.

Anchored floating panel.

Hover and focus tooltip.

Expandable section; DisclosureGroup for accordions.

Selectable list with sections; DropdownItem for menus and selects.