Components
Atoms — the smallest building blocks. 44 components mirroring the live tate2301/huchu UI primitives, each documented end-to-end.
.b-* = block (mobile-first layout primitive). .x-* = composed pattern (cross-shell flow). Unprefixed = atomic primitive. Roadmap (see audit A-1): collapse .b-* and .x-* into one prefix once the breaking-change window opens.Modifiers. Size = postfix (
btn-sm, avatar-sm). Tone = compound (.btn.tone-danger, .badge.tone-success). Variant = postfix (btn-ghost, btn-primary). See audit A-2 / N-1.
Action
The user reaches for these every minute.
Button
Primary, secondary, ghost, quiet, destructive, link.
Button group
Joined buttons — split button, toggle group.
Segmented control
Pill of 2–4 mutually-exclusive segments.
Chip & tag
Small clickable pill for filters and removable tags.
Command palette
⌘K launcher.
Dropdown menu
Floating list of actions anchored to a trigger.
Input
Text, choices, switches.
Input
Single-line text entry, plus the .field label/helper/error wrapper.
Input group
Input with prefix, suffix, or inline action.
Input OTP
Six-digit code input. Auto-advance.
Select & combobox
Pick one from a list. Native + combobox.
Combobox
Searchable single- or multi-select.
Date picker
Single date or range. Anchored to an input.
Calendar
Read-only month / week / day grid.
Checkbox & radio
Toggle many or pick exactly one.
Switch & toggle
Binary preference; applies immediately.
Accordion
Disclosure rows that reveal more on click.
Identity & status
Small surfaces that tell the operator what state something is in.
Status indicator
Dot + label. Five canonical states.
Badge & pill
Inline non-clickable label.
Avatar
Initials in a circle. Workspaces rounded-square.
Tooltip
Hover-reveal label for icon-only triggers.
Hover card
Rich-content hover preview.
Kbd
A single keyboard key or combo.
Floating surfaces
Things that overlay the page.
Wait & progress
For things that take time.
Layout primitives
Composable rows and containers.
Item row
Generic vertical-rhythm row.
Mobile list
Thumb-optimised stacked list rows.
Mobile action bar
Bottom-anchored primary action bar.
Scroll container
Scrollable region with styled scrollbar.
Page section
Grouping container with title + sub.
Specialised
Composite primitives that live across the platform.
Data & feedback
Tables, tabs, tags, toasts and progress placeholders. Newly catalogued — pages existed but weren’t indexed (see reuse audit G-1).
Table
Header, row, cell — the simple list flavour.
Tabs
Inline tab strip for switching panels.
Tag
Inline label with optional remove (×).
Toast
Transient floating confirmation or error.
Skeleton
Shimmering placeholder shape during load.
Pagination
Page-number row + showing-N-of-M label.
Form & surface helpers
Small primitives that close the gap between form shell, list, and overlay. Newly catalogued from the reuse audit (M-1, M-3, M-4).