garn
Get started
v0.3.0 · Radix UI · Tailwind v4 · MCP inside

Built by hand.
Read by machines.

garn is an agent-native design system — accessible Radix + Tailwind components you copy in and own, plus a machine-readable layer of judgment: when to use what, accessibility contracts, and recipes your AI queries instead of guessing.

npx garn-ui install

one command · the source lands in your repo · you own it from there

Browse components Watch an agent build
components
84
patterns
50
a11y contracts
104
tokenized
100%
garn/ui · live composition

A real product screen composed from garn — AppShell, DataTable, Stat, Timeline — rendered live in React. (Landing here next.)

The loom

Watch an agent weave

A recorded session, played back exactly as it ran — prompt in, audited UI out.

1

Prompt

Build a billing settings page with a plan switcher and usage stats.

2

The system answers

garn_match_recipe"choose one option from a small set with descriptions"
→ radio-option-cards · radio-group + field · score 29
garn_match_recipe"KPI summary row of key metrics"
→ dashboard-stat-row · stat · score 29
garn_get_examplesfield · role: canonical
→ 3 examples — copying ControlsExample: a RadioGroup of card Fields, labels wired via htmlFor
garn_get_examplesstat · role: canonical
→ 1 example — Stat one-liner: label + Intl-formatted value + sentiment-aware delta
3

Code composes

  • Plan group carries an accessible name
  • Each Field wires its control's label + description
  • Every metric is named, not just a number
  • Buttons have accessible names
audit: pass · 0 violations
4
Rendered
app/billing audit: pass
The billing page renders here — live React, wired next.
No vibes. The agent queried the same judgment layer you're reading — and the audit would have caught it if it hadn't.
Copy-in, not install
The source lands in your repo.
  1. 1
    npx garn-ui initpoint at the registry, write the theme
  2. 2
    npx garn-ui add button card dialogthe actual .tsx lands in your project
  3. 3
    @import "./garn-theme.css"one import, fully tokenized
No dependency to outgrow. Edit anything — it's yours.
your-app/
Your file tree after copy-in: components/ui/button.tsx · card.tsx · dialog.tsx · garn-theme.css — shown as a live tree here.
Dye
Re-theme the whole system in the browser.
Semantic tokens mean identity is one remap away — change the roles, and every component follows. No hunt-and-replace, ever.
Open the theme builder 
garn/theme
The live theme builder embeds here — pick a brand color, watch all 84 components re-skin in place.
That flicker you just caused? That's the entire theming model.
Threads
84 components, 8 categories
The full roster — every thread on the shelf, documented and contract-checked.
Actions
5
ButtonButton GroupToggleToggle GroupToolbar
Forms & input
24
BadgeSelectCalendarCheckboxComboboxDatePicker+19
Navigation
6
BreadcrumbMenubarNavigation MenuPaginationStepper+1
Overlays & layering
10
Alert DialogCommandContext MenuDialogDrawer+5
Disclosure
2
AccordionCollapsible
Feedback & status
6
AlertEmptyProgressSkeletonSonner (Toast)+1
Data display
24
Activity GridAvatarBadgeBar ListBoard+19
Layout & structure
7
App ShellAspect RatioCardResizableScheduler+2
Why trust it
Opinionated where it counts. Verifiable everywhere.
Accessible by contract
104 machine-checkable a11y contracts — names, labels, keyboard models — linted on every composition.
Semantic tokens only
Components consume roles, never raw values. The build fails on a stray hex.
Docs that can't drift
Every generated file — docs, llms.txt, registry — is drift-gated in CI against one metadata source.
Built for agents
One metadata source feeds the docs, llms.txt, and an MCP server your AI queries directly.
Your agent reads garn natively.
claude mcp add garn -- pnpm -s --filter @garn/mcp start
Setup guide llms.txtllms-full.txt
Copy in a component. Keep your design language.
Get started Read llms.txt