Showcase
All 49 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
Dates
An ISO string in, and UTC and the reader’s own clock out — in the reader’s order.
DateField
Docs →Segments in the reader’s order: nothing typed is ever parsed.
light
Due
10
19
2026
Opens at
09
30
AM
dark
Due
10
19
2026
Opens at
09
30
AM
DatePicker
Docs →The field with a calendar behind its button. At rest, the field.
light
Publish at
10
19
2026
09
30
AM
dark
Publish at
10
19
2026
09
30
AM
DateRangePicker
Docs →Two fields over a range calendar on two months. At rest, the fields.
light
Stay
10
19
2026
10
23
2026
dark
Stay
10
19
2026
10
23
2026
Calendar
Docs →APG’s grid keys, the reader’s week, and a range band that mirrors.
light
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
dark
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
TimeZoneSelect
Docs →Every zone the runtime knows, found by place or by offset.
light
dark
DateTime
Docs →A value for whoever reads it, inside a real <time datetime>.
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.
List
Docs →Rows to read and pick from, one action covering each item.
light
- AL9:41The engine might compose music.
- GHMonThe compiler ships on Friday.
dark
- AL9:41The engine might compose music.
- GHMonThe compiler ships on Friday.
SwipeItem
Docs →A list item that slides aside to show its commands — here, open.
light
- ALThe engine might compose music.
- GHThe compiler ships on Friday.
dark
- ALThe engine might compose music.
- GHThe compiler ships on Friday.
SortableList
Docs →Items put in order by a handle, or by the keyboard’s grab.
light
- Plan
- Build
- Ship
Press Enter or Space to pick the item up, the arrow keys to move it, Enter to drop it and Escape to put it back.
dark
- Plan
- Build
- Ship
Press Enter or Space to pick the item up, the arrow keys to move it, Enter to drop it and Escape to put it back.
VirtualList
Docs →A thousand items, a dozen of them in the DOM.
light
- Message 1
- Message 2
- Message 3
- Message 4
- Message 5
- Message 6
- Message 7
- Message 8
- Message 9
- Message 10
- Message 11
- Message 12
- Message 13
- Message 14
- Message 15
- Message 16
- Message 17
- Message 18
- Message 19
- Message 20
dark
- Message 1
- Message 2
- Message 3
- Message 4
- Message 5
- Message 6
- Message 7
- Message 8
- Message 9
- Message 10
- Message 11
- Message 12
- Message 13
- Message 14
- Message 15
- Message 16
- Message 17
- Message 18
- Message 19
- Message 20
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
FlowContainer
Docs →Declares React Flow's --xy-* variables, so the canvas follows the page.
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.