The kit
All 25 components across 14 categories, rendered live in the current theme. Toggle the theme in the header to see any of them flip. Open a component for its light + dark side-by-side, variant matrix and source.
Button, Input, Label, Card, Table, Badge — every primitive in one place, every variant on screen.
Button
Input + Label
Badge
Card
Card content — any React node can go here.
Table
| Name | Status | Role |
|---|---|---|
| Alice | Active | Admin |
| Bob | Invited | Member |
| Carol | Pending | Viewer |
Select, Checkbox, Radio group, Switch, Slider, Textarea — every input on Base UI primitives.
Toggle, Toggle group, Number field, Toolbar, Sheet, Rating, Tag input, Input OTP.
Toggle
Toggle group
Toolbar
Rating
Sheet (drawer)
File upload
Drag files here or browse
Max 5.0 MB per file
Date picker, Date range picker, Time picker, Color picker, Editable, Password input, Clipboard, Toggle group (segmented).
Date picker
Date range picker
Color picker
Editable (click to rename)
Toggle group — segmented (sliding indicator)
Combobox, Command palette (⌘K), Navigation menu, Menubar, Stepper.
Command palette
Navigation menu
Menubar
Stepper
Modal dialog on Base UI primitive — accessible, dismissible by ESC + backdrop.
Anchored menu on Base UI Menu primitive with align/side props.
Tabbed panels on Base UI Tabs primitive.
Everything looks good. No action required.
Transient notification using Base UI Toast primitive + createToastManager.
Compound form on Base UI Field + react-hook-form + Zod. Single island because compound state.
Accordion, Collapsible, Avatar, Skeleton, Separator, Scroll area, Aspect ratio.
Accordion
Collapsible
Avatar
Skeleton
Separator
Scroll area
Aspect ratio (16:9)
Resizable master-detail panes on @zag-js/splitter (ADR 0009 — Base UI ships no equivalent). Drag or arrow-key resize, per-panel min/max size.
Drag the handle, or focus it and press the arrow keys (Home/End jump to the min/max) — a common master-detail layout primitive.
Detail pane
Content on this side resizes as the left pane grows or shrinks, clamped to each panel's min/max size.
Breadcrumb, Pagination, Alert, Spinner, Meter, Kbd, Description list, Empty state, Error state.
Breadcrumb
Alert
Meter
Spinner
Kbd
Press ⌘ K to search
Pagination
Description list
Empty state
No issues yet
When you file your first issue it'll show up here.
Error state
Failed to load issues
Check your connection and try again. GitHub API allows 60 requests/hour unauthenticated.
Flashbar
Bottom-anchored, dismissible bulk-action toolbar — the "N items selected" pattern. Data-source agnostic: plugs into DataTable row selection or any other list.
Select one or more rows — a bottom-anchored bar appears with the selection count and bulk actions, dismissible without acting.
One field definition (money, status, date, select…) drives DataTable cell rendering, PropertyFilter widgets, Form fields, and description-list rows — instead of wiring each surface by hand.
One fieldDefs object (ROADMAP Epic 24) drives every surface below — a DataTable column, a Form field, a description-list row, and a PropertyFilter property — for amount, status, and category.
Generic <DataTable> on TanStack Table + Virtual. Sort, filter, column visibility/pinning, resizing, virtualization, URL state sync, row selection + ActionBar, per-column filters, expandable rows, summary row, localStorage-persisted visibility, and a server-driven `request` contract wired through useListing.
Structured token filtering (PropertyFilter) feeds the table; then sort, pin, per-column filter, expand a row for detail, select rows for bulk actions, resize widths, and export. Virtualization is active even on this small dataset.
| 8 of 8 | Totals → |
Icon/label button with a loading state while an async export function runs, then downloads the resolved Blob. Standalone — pairs with DataTable's `onExport` prop but composes into any export flow.
Click to run a (simulated) async export — the button shows a loading spinner, then the browser downloads the resolved file.
Tremor-Raw-style: KpiCard, Metric, ProgressBar, Tracker, Callout, Divider. CSS-var-themed, dark-mode-flip.
Monthly Revenue
$42,800↑12.3%vs. last month
Active Users
3,204↓2.1%vs. last month
Uptime
99.7%→0.1%30-day average
Storage usage
Service uptime — last 30 days
96.7%
Information
Success
Warning
Error
Themed Recharts wrappers (Line, Bar, Area, Donut). Colors come from --chart-1..5 CSS vars.
LineChart
BarChart
AreaChart
DonutChart
LazyMotion + domAnimation pattern with strict mode. Motion code is in a separate lazy chunk.
InstallButton + UpdateToast — driven by virtual:pwa-register events through Nano Stores.
Simulate the global PWA signals. The install button and update toast are mounted in BaseLayout — trigger them here to see them appear.
Tree view, Timeline, Bar list, Sparkline, Gauge.
Tree view
Timeline
Issue filed
09:14FeedbackFAB pre-filled diagnostics.
PR opened
09:41forja implemented, centinela validated.
Merged & deployed
10:02Issue closed automatically.
Bar list
Sparkline
Gauge
Throw an error inside an island — get a pre-filled GitHub issue with stack trace, component path, URL, and UA.
No error — click the button to trigger the boundary.