The catalog.

A hundred-plus components, grouped by what they do — not what they look like. Every interactive atom reads one shared state model, so behaviour is defined once and inherited everywhere.

Actions

Buttons, button groups, the floating action button — anything that commits an intent.

Text inputs

Input, textarea, rich-text and code editors, and the fields that capture typed values.

Selection

Checkbox, radio, switch, select, slider, calendar — controls that pick from a set.

Navigation

Tabs, breadcrumb, sidebar, pagination, menus — moving between places and views.

Containers

Card, accordion, collapsible, dialog scaffolds — surfaces that hold other content.

Data display

Tables, data grid, charts, metrics, timelines — the read-only views of state.

Overlays

Dialog, popover, tooltip, drawer, toast — layers that sit above the page.

Feedback

Alert, banner, callout, progress, spinner, skeleton — status the system reports back.

Tags & indicators

Badge, chip, pill, status pill, avatar — small marks that label or signal.

State model · every interactive atom

Default base · rest Resting

Hover hover: Hover

Focus focus-visible: Focus

Active active:scale Active

Disabled disabled:opacity Disabled

Five states, declared once via Tailwind pseudo-class variants (hover: focus-visible: active: disabled:) and Radix data-state — never exploded into per-component variants.

Conventions · shared by all

data-slotEvery root carries data-slot so each part is identifiable for styling and testing.

CVA variantsVariants and sizes are managed with class-variance-authority, each exporting its variants type.

asChildComposition via the Radix Slot — asChild renders a child element in the component’s place.

'use client'Interactive components declare ‘use client’ for React Server Component compatibility.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait