Every building block in one place
Each component is built on the colour, spacing, and typography tokens from the foundations pages. They all share the same padding rules, focus styles, and sizing conventions so they feel consistent when combined. Click into any component to see its variants, states, and sizing options.
Actions
6Buttons, button groups, and toggles for triggering actions and switching modes.
AI
20Chat, agent, and model surfaces for building AI products, from the composer to the reasoning trace and the diff an agent proposes.
Agent plan
Agent status
AI button
Chat header
Chat marker
Chat message
Chat thread
Code diff
Composer
Document chip
Interrupt card
Message actions
Message card
Model picker
Prompt suggestions
Release notes
Rendered markdown picks up the token scale, down to inline code.
Prose
Reasoning
Source chip
Streaming text
Tool call
Charts
15Data visualisation components for plotting series and activity over time.
Data display
24Cards, tables, lists, and badges for presenting structured content.
Accordion
Avatar
Avatar group
Badge
Card
Card stack
Carousel
Chip
--radius-full: 999px;Code block
Contact card
Data table
Entity card
Event calendar
Figure
Image compare
Instructions
Kbd
Substackopen_in_new
GitHubopen_in_newLink list
Systems are coordination problems.
Quote
Selection card
Stat
Table
- Discover
- Design
- Ship
Timeline
Tree view
Effects
1Ambient and decorative surfaces that sit behind or around the interface.
Feedback
9Alerts, toasts, progress, and empty states that tell people what is happening.
Forms
20Inputs, pickers, and selection controls for collecting and editing values.
Checkbox
Colour picker
Combobox
Date input
Date picker
Dropdown
Field
File input
Filter bar
Input
Number input
Pin input
Radio button
Rating
Slider
Swatch
Tag input
Textarea
Time picker
Toggle switch
Layout
6Page scaffolding: app shells, sidebars, dividers, and section headings.
Maps
3Geographic surfaces for showing where things are and what connects them, from the globe to its legend.
Navigation
7Top bars, breadcrumbs, tabs, steppers, and pagination for moving through a product.
Overlays
9Dialogs, drawers, menus, and tooltips that float above the page.