Components

Interactive, live examples for every component live in the Histoire story build, linked below — this page intentionally doesn't duplicate those examples. Each entry links to the component's stories (light/dark, states, responsive behavior) and, where relevant, the sub-components it's used alongside.

Button

Primary/secondary/ghost/destructive variants, sizes, loading and icon-only states.

Input

Text/email/password/number, prefix/suffix slots, invalid + error message state.

NumberField

Text input + role=spinbutton (not native <input type=number> — supports locale formatting and aria-valuetext), increment/decrement buttons with press-and-hold repeat, locale-aware parsing.

Checkbox

Includes indeterminate state.

RadioGroup

A labeled group of native radio inputs with roving native keyboard behavior.

Radio

Switch

A boolean toggle styled as a switch, not a checkbox.

Select

Native <select> wrapped for consistent styling and error state.

Textarea

Multi-line text input with the same invalid/error pattern as Input.

ToggleGroup

Single-select segmented control.

ToggleGroupItem

Dialog

Modal dialog with focus trapping, Escape-to-close, and alertdialog support.

Sheet

Edge-anchored Dialog variant (top/right/bottom/left) that slides in, sharing Dialog's focus-trap/dismiss/inert-background composables and WAI-ARIA dialog pattern. Respects prefers-reduced-motion. Does not implement gesture/swipe-to-dismiss or drag snap-points — a deliberate v1 scope cut.

Popover

Anchored floating panel (built on Floating UI) with dismiss-on-outside-click/Escape.

PopoverTriggerPopoverContent

Tooltip

Hover/focus-triggered hint text; dismissible with Escape.

DropdownMenu

Anchored menu with roving arrow-key navigation, Home/End, and type-ahead. DropdownMenuContextTrigger adds a context-menu mode — a renderless scoped-slot trigger that anchors the same menu to pointer coordinates instead of a trigger element, opened by right-click or a ~700ms touch long-press, reusing DropdownMenu's existing keyboard/typeahead/dismiss logic unchanged. Submenus and checkbox/radio menu items aren't supported yet — a pre-existing DropdownMenu gap, not new scope here.

DropdownMenuTriggerDropdownMenuContentDropdownMenuItemDropdownMenuSeparatorDropdownMenuContextTrigger

Separator

Horizontal or vertical dividing rule; role=separator by default, or aria-hidden via a decorative prop. Also used internally by DropdownMenuSeparator.

DataTable

Sorting, client/server pagination, row selection (single/multiple), global + per-column filtering, container-query card collapse.

Pagination

Standalone page navigation with windowed ellipsis and an optional page-size picker; also used internally by DataTable.

Tabs

Horizontal or vertical, roving-tabindex tab list.

TabListTabTabPanel

Accordion

Single- or multiple-open mode, configurable heading level.

AccordionItemAccordionHeaderAccordionContent

Collapsible

APG Disclosure pattern — a single trigger and panel, no heading level and no region/group semantics (a lone Accordion item without the group context).

Toast

Imperative useToast() API backed by a shared, visually-positioned toast region.

ToastRegion

Card

Themeable container with header/body/footer slots; optional real <button>/<a> interactive form.

Grid

Responsive column layout via container queries or viewport breakpoints; composes with Card.

Skeleton

Purely presentational loading placeholder (pulse or shimmer), aria-hidden, respects prefers-reduced-motion. Consumer owns loading announcements.

Badge

Decorative by default; pass a label for badges conveying a count or status that matters functionally.

ProgressBar

Determinate and indeterminate modes, role=progressbar with correct aria-value* attributes.

Avatar

Image with graceful fallback to initials or an icon on load failure or when no image is given.

Breadcrumb

Container-query-driven collapse of intermediate items into a menu once the trail is too long.

Splitter

Draggable and keyboard-resizable panes (2+), horizontal or vertical, with per-pane min/max and v-model persisted sizes.

SplitterPane

Slider

Draggable and keyboard-adjustable single-value slider, horizontal or vertical, with locale-aware aria-valuetext. Shares its pointer/keyboard drag plumbing with Splitter via useDragValue.

Combobox

Filterable, keyboard-navigable combobox (APG 1.2 aria-activedescendant pattern) — the text input keeps real DOM focus throughout. Single- or multi-select via one `multiple` prop; multi-select renders removable tags (Backspace-on-empty removes the last one). Supports async loading/empty/error states (the consumer owns fetching/debouncing; Combobox just consumes the resulting state). See design-docs/combobox.md.

ComboboxInputComboboxContentComboboxOption

CommandPalette

Modal command menu (⌘K-style) — a search input plus a filterable action list, sharing its aria-activedescendant listbox machinery (useActiveDescendant) and dismiss/focus-trap/inert-background composables with Combobox and Dialog respectively, rather than composing either directly. Each item is its own action (@select), not a persisted value.

CommandPaletteItem

Calendar

Standalone inline WAI-ARIA grid calendar — single-date or range selection, full keyboard support, locale-aware. DatePicker composes this internally for its popover.

DatePicker

Single-date or range selection via a WAI-ARIA grid dialog, full keyboard support, locale-aware (Intl-based, no date dependency), and a typed-text-input companion.

TreeTable

role=treegrid nested data table — expand/collapse, per-sibling-group sort, ancestor-preserving filter, roving-tabindex keyboard grid, and card-collapse at narrow widths.

This completes the initial component list from CLAUDE.md.