Showcase
All 38 components on one page, each drawn twice — a light theme and a dark one, side by side, whatever theme you are reading in.
Both themes at once
Each card renders its component twice, and the two halves are nothing but a
<Box.Theme use="local"> each. A theme is a class on an ancestor and every rule is scoped to the subtree it owns, so a light half inside a dark page is light throughout — including for the props the inner theme never mentions. No re-render, no context read in a component, no second stylesheet.JSX
<Box.Theme use="local" theme="light">
<Button>Save</Button>
</Box.Theme>
<Box.Theme use="local" theme="dark">
<Button>Save</Button>
</Box.Theme>Where a component paints in the top layer — a dialog, a menu, a tooltip — the card shows the trigger, which is what the page itself draws. Every card links to the page that documents the rest of it, and every snippet on those pages opens in the playground.
Forms
A real native control each, and the label that names it.
Button
Docs →Three variants, and the disabled state of one.
light
dark
Textbox
Docs →An input, with the placeholder styled as a nested prop.
light
dark
Textarea
Docs →The same field, taller, and growing with what is typed.
light
dark
Checkbox
Docs →A native input; the label is the component’s own job.
light
dark
RadioGroup
Docs →The APG radio group: one name, one tab stop, arrow keys.
light
Plan
dark
Plan
RadioButton
Docs →The same input on its own, for a group you assemble.
light
dark
Switch
Docs →role="switch" over a checkbox, so Enter toggles it too.
light
dark
Slider
Docs →One thumb or two — the value’s shape decides which.
light
dark
Layers
In the browser's top layer: no portal, no z-index, no focus trap written here.
Popover
Docs →The Popover API: light dismiss and focus return are the browser’s. At rest, its trigger.
light
dark
Dialog
Docs →A real <dialog> with showModal(). At rest, its trigger.
light
dark
AlertDialog
Docs →The same, never dismissed by a press outside. At rest, its trigger.
light
dark
Menu
Docs →APG’s menu button, submenus included. At rest, its trigger.
light
dark
Tooltip
Docs →Hover or focus the button. At rest, its trigger.
light
dark
Dropdown
Docs →The select-only combobox, closed — which is the control itself.
light
Theme
dark
Theme
Combobox
Docs →The editable one: a row in is a row out, typed.
light
dark
Overlay
Docs →Positioning with no pattern on it — shown open, beside its anchor.
light
In the top layer, beside its anchor.
dark
In the top layer, beside its anchor.
Disclosure
Open and shut, animated by a grid track rather than a measured height.
Tabs
Docs →One tab stop for the list, and selection follows focus.
light
Four open pull requests, two of them yours.
dark
Four open pull requests, two of them yours.
Accordion
Docs →A heading per section, and a panel that is never measured.
light
Two to four working days, tracked.
Thirty days, in the packaging it arrived in.
dark
Two to four working days, tracked.
Thirty days, in the packaging it arrived in.
Collapsible
Docs →One disclosure, with a trigger of your own and no heading.
light
A kite, and the string for it.
dark
A kite, and the string for it.
Feedback
What is happening, what happened, and what is not there yet.
Progress
Docs →A value, and the indeterminate state that reports none.
light
dark
Toaster
Docs →A viewport is one per app, so the page mounts one. Press to send it a toast.
light
dark
Skeleton
Docs →Bars with a travelling gloss, aria-hidden unless labelled.
light
dark
Presence
Docs →The ~1 KB that lets a node animate on its way out.
light
Still here until its own transition says otherwise.
dark
Still here until its own transition says otherwise.
Data
Rows, and the space somebody rearranges them in.
DataGrid
Docs →Four rows of the grid that does a million.
light
Customer
Status
Total
Alice Johnson
Shipped
259.97
Bob Smith
Processing
89.98
Carmen Diaz
Shipped
412.50
Dmitri Petrov
Cancelled
19.99
dark
Customer
Status
Total
Alice Johnson
Shipped
259.97
Bob Smith
Processing
89.98
Carmen Diaz
Shipped
412.50
Dmitri Petrov
Cancelled
19.99
DashboardGrid
Docs →A layout in cells, compacted upward. Add editable for the handles.
light
Revenue
Orders
Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back.
dark
Revenue
Orders
Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back.
Widget
Docs →The chrome, and its four states — here: filled, loading, empty.
light
Revenue
Last 12 weeks
Orders
Refunds
Nothing to show yet.
dark
Revenue
Last 12 weeks
Orders
Refunds
Nothing to show yet.
Charts
Box props on a shape. Not a chart library — no axes, no legends.
Sparkline
Docs →A line, an area and bars off the same eight numbers.
light
dark
ProgressRing
Docs →A fraction, rounded into a class so it still transitions.
light
dark
Gauge
Docs →The same arithmetic over a sweep you choose.
light
dark
MiniDonut
Docs →The one primitive that needs a list of colours.
light
dark
ChartContainer
Docs →Declares --color-<series>, so the chart names no colour at all.
light
dark
Agent
What a model ran, what it wants permission for, and what it said.
ToolCallCard
Docs →Four statuses, each carrying its own word beside the dot.
light
Input
{
"query": "refunds",
"limit": 20
}Input
{
"orderId": 4182
}Output
{
"total": 6400
}dark
Input
{
"query": "refunds",
"limit": 20
}Input
{
"orderId": 4182
}Output
{
"total": 6400
}ApprovalCard
Docs →A question somebody answers, not a stage a call passes through.
light
Refund order 4182
6,400 MDL back to the customer. This cannot be undone.
Request
{
"orderId": 4182,
"amount": 6400
}dark
Refund order 4182
6,400 MDL back to the customer. This cannot be undone.
Request
{
"orderId": 4182,
"amount": 6400
}Reasoning
Docs →Closed by default, opening in the accordion’s own grid track.
light
The refunds all came from one batch, so the customer is asking about a shipment rather than a payment.
dark
The refunds all came from one batch, so the customer is asking about a shipment rather than a payment.
StreamingText
Docs →Give it the message so far; a whole one paints at once.
light
Four orders were refunded this week, all of them from the same batch.
dark
Four orders were refunded this week, all of them from the same batch.
Primitives
The three that are the element they name.