System
The parts this site is made of, each on a bench where you can handle it, slow it down, hold it on a frame and look at its grain under a loupe. Nothing here is a picture of a component: each one runs on the same code as the site, so what you see is what ships.
Some parts are drawn but not used on the site yet. Their code loads only on these pages.
Foundations
Actions
Forms
- Field A control on an ink rule
- Textarea Long text on one rule
- Input group An input with a glyph and an action
- One-time code One rule per character
- Select Pick from a layer
- Combobox Type to filter the options
- Checkbox A grain cell beside a label
- Radio group One of several
- Switch A short axon, on or off
- Slider A node on a hairline
- Calendar Days with no grid lines
- Date picker A calendar in a layer
Navigation
Layers
- Dropdown menu The site menu
- Popover The contact popover
- Dialog A sheet over the page
- Alert dialog Asks before it can’t be undone
- Sheet A layer against an edge
- Hover card A preview of a link
- Context menu The menu where you pressed
- Command Search every action
- Toast A short note at the edge
- Tooltip A label at the end of a rule
Content
- Table Rules and hairlines, no boxes
- Data table Rows you can sort and select
- Accordion Rows that open
- Card Content on a hairline
- Badge A label led by a node
- Avatar A 1-bit portrait
- Alert A note hung from a rule
- Separator Ink or a hairline
- Key A key on a short rule
- Scroll area A thin ink thumb
- Resizable Two panes and a grip
Feedback
Site patterns
Motion
Nothing matches “”.