Button
Triggers an action, styled from your sizes, colors, radii and variants.
Components
Every component is styled from your config: its sizes, colors, radii, variants, spacing and text styles. The previews below use this site’s config.
Buttons
Section titled “Buttons”IconButton
A square button containing only an icon.
ButtonGroup
Attached or spaced buttons that share size, color and variant.
SplitButton
Execute the selected action and switch it from a dropdown.
ToggleGroup
Segmented controls and groups of toggle buttons.
File dropzone
Pick or drop files and render the selected list.
Field
Label, helper text and error message, wired to a control.
Label
A form label in your label text style, or a filled label with a variant.
Input
A single-line text input on the shared size scale.
NumberInput
A numeric input with increment and decrement buttons.
ColorPicker
Choose a highlight with hex text, a native picker and named suggestions.
Textarea
A multi-line text input that starts at one control height.
Select
Picks one value from a list, with keyboard and typeahead.
Combobox
A text input with filtered suggestions, including async search and multi-select.
DatePicker
Picks a day or a range from a calendar, with date-fns locales.
Checkbox
A checkbox with a label, including a mixed state.
RadioGroup
A labelled group of radio buttons with one value.
Switch
An on/off toggle with role="switch".
Slider
Picks a number or a range by dragging or with the keyboard.
Typography
Section titled “Typography”Text
Text in one of your config's text styles.
Heading
h1 to h6, each styled by your config.
Link
A text link that inherits the surrounding text style.
Navigation
Section titled “Navigation”Stepper
Track current, completed and disabled stages with typed identifiers.
TreeView
Explore nested items with independent focus, expansion and selection.
Nav section
Named groups of navigation links, with an optional icon rail.
Nav item
A navigation link with an icon and current-page state.
Layout
Section titled “Layout”SplitPane
Resize independently scrollable panes with a pointer or keyboard.
App layout
A responsive workspace with persistent navigation and scrolling content.
Stack
Vertical layout with a gap from your spacing scale.
Inline
Horizontal layout that wraps, with a gap from your spacing scale.
Grid
Equal columns, responsive cards, and sidebar layouts.
Card
A bordered surface with padding, radius and shadow tokens.
Divider
A thin separator, horizontal or vertical.
Visually hidden
Provides accessible names and descriptions without visual content.
Overlays
Section titled “Overlays”Dialog
A modal dialog on the native dialog element.
Drawer
A modal panel that slides in from the left or right.
Popover
A floating panel anchored to a trigger.
Tooltip
A short label on hover and keyboard focus.
HoverCard
A preview card on hover or focus.
CommandPalette
A searchable command menu opened with a keyboard shortcut.
Menu
A list of actions with keyboard navigation and typeahead.
Toast
Brief notifications, shown from anywhere with toast().
Data display
Section titled “Data display”Avatar
Person images with initials fallback and overlapping groups.
Tabs
Switches between panels, with arrow key navigation.
Accordion
Expandable sections, one or many open at a time.
Table columns
Resize columns and choose their visibility.
Table
Data tables with density from your config.
Pagination
Numbered pages or a compact summary with navigation arrows.
Breadcrumb
Where the current page sits, with collapsible long trails.
Feedback
Section titled “Feedback”Empty state
A centered message and actions when a view has no content.
Badge
Labels for status and categories, or removable tags.
Alert
An inline message with an icon, action and dismiss button.
Spinner
A loading indicator sized like an icon.
Skeleton
Placeholders that match text styles and control heights.
AudioPlayer
Playback and seeking with controls from your design system.
Progress
Determinate and indeterminate progress bars.