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 riskError
    Statusshape + word

    Status label

  • Design review10:00 – 11:00
    Sprint planning11:00 – 12:00
    Scheduling6 colours · 8 states

    Event block

  • Acme FreightIn review
    INV-4821 · issued 12 Oct
    Amount$12,480Due24 OctOwnerP. Raman
    Responsivetable → card

    Record card

  • ApproveFocus
    Controlsring 2 + 2

    Buttons & focus

  • Find & acttry them

    Filter chips

  • RunNet pay
    ✓RUN-1048
    US entity
    $1,284,300
    RUN-1047
    India entity
    Error
    Data display40 · 52 · 32 px rows

    Table row & selection

  • Net retention
    112%▲ 4 pts
    Charts & cardssimple · spark · meter · ratio

    KPI card

  • October 20266 nights
    MTWTFSS2829301234567891011121314151617181920
    Inputs9 day states

    Date range picker

  • Go to payroll…⌘K
    Payroll runsPage
    Ana KimPerson
    Run payrollAction ↵
    Navigationpage · person · action

    Command menu

  • Payroll run approved.Undo
    Feedbackloading · success · error · AI

    Toast

  • Cost centres
    FinanceQ4 closeOps|
    Inputschips + typing

    Tag input

  • Inputstry them

    Switch group

  • CAND-221 · DesignLena VogtPortfolio review · Thu
    InterviewingAK
    Collaborationdefault · hover · dragging

    Kanban card

  • Delete “Northwind web app”?38 dashboards are removed for everyone.Type DELETE to confirmDELETE
    CancelDelete
    Panels & dialogstype to confirm

    Destructive dialog

  • Charts & cardsarrow keys work

    Segmented control

  • Disclosurerecord · tabs · comments

    Slide-over panel

  • Tickets by channel
    MailChatWebCallAPI
    Charts6 types + 3 signature

    Chart card

  • $184 / night
    Harbour loft · 4.8
    Mapsplace · listing · cluster

    Map pin & listing

  • Rich textcompact · docked

    Editor toolbar

  • AI summary
    7 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 bar
3
  • 3 variants
  • single
  • 3 variants

Data display

View tab, Pagination
2
  • 2 variants
  • single

AI awareness

AI banner, AI insight card
2
  • 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 · Collapsed
3
  • block
  • block
  • block

About card

About card
1
  • block