Components
23 components, each one live below. Every preview is the real component — not a screenshot.
Actions
Button
Nine visual weights across six tones, six hover effects on a separate axis, and the grouped, toggle, copy and back-to-top patterns built on them.
Sizes
Token colours
Any CSS colour
Spinner
Eighteen pure-CSS activity indicators — rings, dots, bars and shapes — all inheriting their colour from the text around them.
Forms
Checkbox
A real checkbox input with a drawn indicator, including the indeterminate state.
A pill stepper — buttons attached to the field itself.
Round buttons in a card instead of a bare spinner.
No box at all — just two soft, color-coded chips.
Solid, blocky buttons — built for a thumb, not a cursor.
Stacked chevrons replace the left/right pair entirely.
No buttons at all — just underlined text doing the work.
Dashed all the way through — button, badge and button alike.
Field
The label, description and error wrapper every control shares — wiring up ids and aria attributes for you.
Input
A single-line text control with addons, sizes and native form participation.
Free forever, 1 project
$20/month, unlimited projects
$60/month, shared workspaces
Radio
Grouped single-choice inputs with arrow-key roving focus.
Type a letter with the list open to jump to it.
Select
A listbox with typeahead, roving focus and collision-aware positioning — not a native select.
Arrow keys step by 1, Page Up and Page Down by 10.
Slider
A draggable range control with full keyboard support and step snapping.
Applies the moment you flip it — no Save button.
Switch
An on/off toggle for settings that apply the moment they change.
Starts at 2 rows, stops growing at 8.
Textarea
A multi-line text control that can grow with its content instead of scrolling.
Display
Alert
An inline message with a tone, a title, a description and optional actions.
Avatar
A user image with an initials fallback that only appears once the image is known to have failed.
Badge
A compact status label sharing the same variant and tone table as Button.
Production
HealthyDeployed 12 minutes ago from main.
- Region
- eu-west-1
- Instances
- 6
- p99 latency
- 84 ms
Card
A surface with header, content and footer parts for grouping related content.
Signed in as ada@example.com
Continue with a single sign-on provider
Separator
A horizontal or vertical divider that stays out of the accessibility tree.
Opacity loops
Travelling highlights
Lit shapes
Drifting textures
Still
Skeleton
Eighteen placeholder treatments — sweeps, textures, opacity loops and three still ones — in any of the six tones, with a shape scale and multi-line stacks.
Overlay
Dialog
A modal with a focus trap, scroll lock and restore-on-close — the reference for the layer stack.
Drawer
A dialog that enters from an edge, for navigation and side panels.
Popover
Rich floating content anchored to a trigger, with focus management and dismissal.
Toast
Stacked notifications driven by a hook, with pause-on-hover and a swipe-to-dismiss region.
Tooltip
A hover and focus label with a shared open delay, so moving between triggers stays instant.
Navigation
Accordion
Collapsible sections that animate to their own content height with no JavaScript measurement.
line variant.solid variant.pill variant.Tabs
Panels behind a roving-focus tablist, in automatic or manual activation and either orientation.