N1
Side nav
Grouped destinations with a new chip, a lock, and a number-key hint.
Components
Components
Filter by category, search the set, or show only what is marked New.
42 components
N2
Number-key router
Digits 1–9 and 0 switch the current view, with the legend in the footer.
N3
Status pill
A short open or closed state with a dot and a text label.
N4
Pill tabs
A single-select tab row. The hash records the open tab.
N5
Filter chips
A single-select chip row. Each chip shows how many records it covers.
N6
Fat footer
Link columns plus a stamp that says when the example data was fixed.
D1
Rule card
A named rule, plain-language chips, a count, and a ranked list. An empty rule stays on the page.
D2
Expandable row
A row opens a panel with a sparkline, a key-value grid, and holders.
D3
Data table
A dense table with a sticky header, a heat column, a mini bar, and a sparkline.
D4
NewTreemap
Rectangle area is weight. Tint is the signed change. Rectangles are grouped.
D5
KPI tiles
One large figure with a written delta, plus a strip of five summary tiles.
D6
Line chart
An area series with a range control and an end-value tag.
D7
NewFlow diagram
Signed bands from sources to uses. Colour follows the use: out or held.
D8
Definitions table
How the example lists are built, one rule per row, with a coloured bullet.
D9
Compare view
The current period ranked against its own earlier periods.
D10
Calendar list
Events split into Upcoming, This week, and Overdue.
D11
Feed list
Dated notes in order, each with a time and a kind.
F1
Start here
Eight numbered cards that name the first actions for this gallery.
F2
Companion card
A speech card with a dismiss control. The artwork is an empty labelled slot.
F3
Companion toggle
Shows or hides the companion slot. The slot stays empty either way.
F4
Soft gate
A limit notice with one action that reveals the rest of the example list.
F5
NewTimed gate
A dialog over a blurred page after a timer. It ships off until this preview is armed.
F6
Locked item
A destination that stays visible, plus the empty state it opens.
F7
Update notice
Two choices for an available stylesheet update: now, or on the next start.
F8
Source note
A block that names the example set and the date it was fixed.
A1
NewAsk panel
Questions over the example register. A write shows a confirm card before it changes anything.
M1
NewExpandable island
A one-line sheet. Opening animates width first, then height. Closing reverses that and does not overshoot.
M2
NewHover intent
Details stay hidden until the pointer dwells 220 ms within 4 px. A fast pass does not reveal them.
M3
NewGlance status
The closed line by itself: one status, no sheet.
M4
NewPill buttons
Pill actions at two heights, 28 px and 34 px, with an 8 px gap.
M5
NewEnter transition
Content enters from scale 0.94 and 6 px down, fading in. Replay runs it again.
B1
Button
Primary, ghost, and small actions from the shared stylesheet.
B2
Text input
A labelled field, a hint, and an inline error.
B3
Select
A native select for a short list of statuses, including a disabled field.
B4
Segmented control
One choice out of a short set, drawn as a joined row of pills.
B5
Chip
A static label, a count, and a chip that can be removed.
B6
Meter
A track with ok, warn, and over fills. The percent is also a label.
B7
Toast
An archive action with an undo notice that stays for 5 seconds.
B8
Skeleton
Still bars in the track colour, with a sentence that names what is loading.
B9
Dialog
A native modal dialog with a title, a short body, and a close button.
B10
Tooltip
A description that appears after a 220 ms dwell, or at once on keyboard focus.
B11
Command menu
A filterable list of example commands. Choosing one writes a line. It does not leave the preview.
No components match this filter.