Components
44 components, each rendered from the published package. Pick one to change its props, compare its states and edit its code live.
Actions
Inputs
Field
Label, hint and error around any control.
Textarea
Multi-line text, fixed or growing with content.
Select
The native select, styled to match.
SearchField
An input with a search glyph and an optional trailing slot.
NumberInput
Numeric entry with the right keyboard on mobile.
DateInput
Date, time or both, with the native picker.
Checkbox
On, off or mixed, with a label and hint.
RadioGroup
One choice from a short list.
SegmentedControl
A few mutually exclusive views, with a sliding capsule.
Slider
A single value on a track.
RangeSlider
Two thumbs for a minimum and a maximum.
Combobox
Type to filter, pick one or many.
InlineEdit
Text that becomes a field when you click it.
Feedback
Banner
A persistent message at the top of a region.
Progress
How far along a known amount of work is.
Spinner
Work of unknown length, in a small space.
Skeleton
The shape of content that is still loading.
Toast
A brief note about something that just happened.
EmptyState
What to do when there is nothing here yet.
StatusPill
The state of a job, a run or an agent.
Data display
Card
A panel for grouped content.
Avatar
A person, as a photo or initials.
StatTile
One number, its change and its trend.
Sparkline
A trend with no axes, sized for a line of text.
KeyValueList
Properties of one thing, label beside value.
CodeBlock
Read-only code with copy and wrap.
Chart
Area, line and bar series with a tooltip and a table view.
DataTable
Sortable, selectable rows with a sticky header.
Timeline
Events grouped by day, newest first.