The kit
All 19 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)
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)
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.
Generic <DataTable> on TanStack Table + Virtual. Sort, filter, column visibility, resizing, virtualization, URL state sync.
Sort columns, filter rows, toggle visibility, and resize column widths. Virtualization is active even on this small dataset — try adding thousands of rows.
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.