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.
ToggleGroup
Segmented controls and groups of toggle buttons.
Field
Label, helper text and error message, wired to a control.
Input
A single-line text input on the shared size scale.
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.
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".
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.
Layout
Section titled “Layout”Stack
Vertical layout with a gap from your spacing scale.
Inline
Horizontal layout that wraps, with a gap from your spacing scale.
Card
A bordered surface with padding, radius and shadow tokens.
Divider
A thin separator, horizontal or vertical.
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.
Menu
A list of actions with keyboard navigation and typeahead.
Toast
Brief notifications, shown from anywhere with toast().
Data display
Section titled “Data display”Tabs
Switches between panels, with arrow key navigation.
Table
Data tables with density from your config.