◇Components
319 parts that already know their states.
Hover, selected, focus, error, loading and dark variants ship with every part, bound to variables rather than hex values. Below: twenty of them live, then the full catalogue.
319components
81blocks: shells, headers, overlays
113icons on a 24 px grid
21categories
Twenty parts, live
- ReadyProcessingAt riskErrorStatusshape + word
Status label
- Design review10:00 – 11:00Sprint planning11:00 – 12:00Scheduling6 colours · 8 states
Event block
- Acme FreightIn reviewINV-4821 · issued 12 OctAmount$12,480Due24 OctOwnerP. RamanResponsivetable → card
Record card
- ApproveFocusControlsring 2 + 2
Buttons & focus
- Find & acttry them
Filter chips
- RunNet pay✓RUN-1048
US entity$1,284,300RUN-1047
India entityErrorData display40 · 52 · 32 px rowsTable row & selection
- Net retention112%▲ 4 ptsCharts & cardssimple · spark · meter · ratio
KPI card
- October 20266 nightsMTWTFSS2829301234567891011121314151617181920Inputs9 day states
Date range picker
- Go to payroll…⌘KPayroll runsPageAna KimPersonRun payrollAction ↵Navigationpage · person · action
Command menu
- Payroll run approved.UndoFeedbackloading · success · error · AI
Toast
- Cost centresFinance×Q4 close×Ops|Inputschips + typing
Tag input
- Inputstry them
Switch group
- CAND-221 · DesignLena VogtPortfolio review · ThuInterviewingAKCollaborationdefault · hover · dragging
Kanban card
- Delete “Northwind web app”?38 dashboards are removed for everyone.Type DELETE to confirmDELETECancelDeletePanels & dialogstype to confirm
Destructive dialog
- Charts & cardsarrow keys work
Segmented control
- Disclosurerecord · tabs · comments
Slide-over panel
- Tickets by channelMailChatWebCallAPICharts6 types + 3 signature
Chart card
- Mapsplace · listing · cluster
Map pin & listing
- Rich textcompact · docked
Editor toolbar
- AI summary7 of 12 critical vendors share one cause: expired SOC 2 reports.AI awarenessexpanded · generating
AI insight card
≡Catalogue
Every part, by category.
Every part as it looks in the kit. Select one for its variants, size, node id and React code.
Inputs & feedback
Checkbox group, Radio group, Switch group, Text area…33
- 2 variants
- 2 variants
- single
- 4 variants
- 3 variants
- 4 variants
- 3 variants
- 5 variants
- 6 variants
- 9 variants
- 2 variants
- 4 variants
- single
- 8 variants
- 4 variants
- 5 variants
- 5 variants
- 2 variants
- 5 variants
- 4 variants
- 3 variants
- 3 variants
- 3 variants
- 5 variants
- single
- 2 variants
- 6 variants
- 4 variants
- 5 variants
- 2 variants
- 3 variants
- 2 variants
- single
Listings
Status label, Tab · With count, Version badge, Breadcrumb…31
- 18 variants
- 3 variants
- 3 variants
- single
- 8 variants
- 3 variants
- 124 variants
- 8 variants
- single
- 4 variants
- 3 variants
- 3 variants
- 6 variants
- 5 variants
- 4 variants
- 2 variants
- 4 variants
- single
- single
- single
- 8 variants
- 4 variants
- single
- 2 variants
- 2 variants
- single
- 2 variants
- single
- single
- single
- 4 variants
AI chat
Prompt chip, Context chip, Switch, Thinking step…26
- single
- single
- 2 variants
- 5 variants
- single
- 2 variants
- 12 variants
- single
- 3 variants
- single
- 2 variants
- single
- single
- 2 variants
- single
- single
- single
- single
- 2 variants
- 2 variants
- 5 variants
- 2 variants
- single
- single
- single
- 2 variants
Collaboration & layout
Inline edit, Comment, Comment composer, Spotlight…26
- 3 variants
- 6 variants
- 2 variants
- single
- single
- 3 variants
- 4 variants
- single
- 9 variants
- single
- 2 variants
- single
- 2 variants
- single
- single
- single
- 2 variants
- 2 variants
- 2 variants
- single
- 3 variants
- 2 variants
- 5 variants
- 3 variants
- 4 variants
- 8 variants
Charts · Signature
Chart / Highlight bars, Chart / Ranked bars, Chart / Tile scale, Chart / Bars with average…20
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
- single
Media
Media tile, Upload item, Dropzone, Player controls…19
- 9 variants
- 4 variants
- 3 variants
- single
- single
- single
- 8 variants
- single
- single
- single
- 2 variants
- 3 variants
- 8 variants
- 2 variants
- 4 variants
- single
- single
- 3 variants
- 3 variants
Scheduling
Event block, Event chip, Now line, Unavailable hatch…18
- 48 variants
- 24 variants
- 2 variants
- single
- 5 variants
- 4 variants
- 4 variants
- 4 variants
- single
- single
- 5 variants
- 4 variants
- 12 variants
- 5 variants
- 3 variants
- 6 variants
- 4 variants
- 2 variants
Panels & dialogs
Text field, Radio, Radio card, Dialog header…17
- 5 variants
- 2 variants
- 2 variants
- single
- 4 variants
- 4 variants
- 2 variants
- 2 variants
- 4 variants
- single
- single
- single
- single
- single
- single
- single
- single
Onboarding
Onboarding step, Step dots, Selectable tile, Choice chip…16
- 6 variants
- 5 variants
- 4 variants
- 2 variants
- 2 variants
- 4 variants
- 8 variants
- 3 variants
- 3 variants
- 3 variants
- 3 variants
- 2 variants
- 3 variants
- single
- 2 variants
- single
Charts & cards
Legend item, Data tooltip, Tooltip, Delta…16
- 2 variants
- 2 variants
- 3 variants
- 5 variants
- single
- 3 variants
- 18 variants
- single
- 5 variants
- 5 variants
- 22 variants
- 4 variants
- single
- 6 variants
- 2 variants
- 6 variants
Navigation & menus
Header navigation, Section header, Tab menu, Tree item…15
- 15 variants
- 3 variants
- 16 variants
- 6 variants
- single
- 4 variants
- 4 variants
- 2 variants
- single
- single
- single
- 6 variants
- single
- single
- single
Maps
Basemap, Map marker, Category marker, Map route…15
- 2 variants
- 11 variants
- 6 variants
- 3 variants
- 4 variants
- single
- single
- single
- single
- single
- single
- 6 variants
- 3 variants
- 2 variants
- 3 variants
Import flows
Upload dropzone, File progress, Import stepper, Mapping header…13
- 4 variants
- 4 variants
- 4 variants
- single
- 5 variants
- single
- 3 variants
- single
- 4 variants
- 2 variants
- single
- single
- 3 variants
Canvas & builders
Canvas dots, Port, Branch label, Edge add…11
- single
- 3 variants
- 5 variants
- single
- 30 variants
- 3 variants
- single
- single
- single
- single
- 5 variants
Rich text
Toolbar button, Shortcut tooltip, Format toolbar, Highlight palette…11
- 8 variants
- single
- 3 variants
- single
- single
- single
- 2 variants
- single
- single
- 10 variants
- 2 variants
Components
Button, Icon button, Checkbox, Status…8
- 24 variants
- 2 variants
- 3 variants
- 6 variants
- 3 variants
- 2 variants
- single
- single
Responsive
Status bar, Home indicator, Tab bar item, Bottom tab bar…8
- single
- single
- 2 variants
- single
- 4 variants
- single
- 3 variants
- 2 variants
Disclosure & states
Accordion item, Show more text, Slide-over · Detail, Empty state · Page…6
- 2 variants
- single
- single
- 5 variants
- 6 variants
- 3 variants
Find & act
List toolbar, Filter builder, Bulk action bar3
- 3 variants
- single
- 3 variants
Data display
View tab, Pagination2
- 2 variants
- single
AI awareness
AI banner, AI insight card2
- single
- 3 variants
▤Blocks
81 blocks between parts and screens.
App shells, sidebars, page headers, overlays, auth screens and bento rows. Templates are built from these, and so is anything new your AI composes.
Navigation & menus
Menu · Grouped actions, Menu · Multi-select with apply, Menu · Sort select…22
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
Overlays
Overlay · Share modal, Overlay · Filter drawer, Overlay · Benefits cart…15
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
Auth screens
Auth · Sign in, Auth · Sign up, Auth · Sign in with phone…13
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
AI blocks
AI · Workspace sidebar, AI · Top bar · model, AI · Welcome…10
- block
- block
- block
- block
- block
- block
- block
- block
- block
- block
App shell & bento rows
App sidebar, Page header, Table · New since last visit…6
- block
- block
- block
- block
- block
- block
Scheduling
Date & time picker, Create meeting dialog, Quick create popover…6
- block
- block
- block
- block
- block
- block
Header navigation
Header · 01 Simple, Header · 02 Search, Header · 03 Inverse…5
- block
- block
- block
- block
- block
Sidebar navigation
Sidebar · Rail + panel, Sidebar · Workspace, Sidebar · Collapsed3
- block
- block
- block
About card
About card1
- block