Get started

garn is distributed source-first: the garn CLI (run via npx garn-ui) copies each component's source into your project, so you own it and edit it in place. It's built for two audiences — you, and the AI agent you build with. Install below, then point your agent at it.

Install

Fastest path

From inside an existing React + Tailwind v4 project, one command sets up garn and copies in your first components:

npx garn-ui install button card dialog

install runs init (sets up garn — config, base files, theme) and then add (copies those components) in one go. Prefer two explicit steps, or starting a fresh app? Follow the walkthrough below.

1
Initialize garn
Writes a garn.json config, the base files every component shares (the cn helper, the token theme, an AI rules file at .garn/rules.md), and installs their dependencies. It points at the hosted registry by default; --registry accepts any URL or local directory.
npx garn-ui init
2
Import the theme
init finds your global stylesheet and adds this import automatically (exactly once — re-running is safe). If it can't find one, add it yourself right after the Tailwind import; every component reads only semantic utilities, so this one import skins the whole system.
globals.css
```
@import "tailwindcss";
@import "./garn-theme.css";
```
3
Add components
Copy in whatever you need by name. The CLI resolves registry dependencies, writes source under your ui alias (respecting a src/ layout), and installs npm packages automatically. Not sure of a name? npx garn-ui list shows the roster, and every component page's Code tab has its exact add command.
npx garn-ui add button card dialog
4
Use it
Import from your own project and compose. Props, variants, and accessibility notes live on each component's page.
example.tsx
```
import { Button } from "@/components/ui/button";

export function SaveBar() {
  return <Button tone="brand">Save changes</Button>;
}
```

Requirements

React 18 or 19garn components are plain React — any React app or framework works. No framework is required (or scaffolded).react.dev ↗

Tailwind CSS v4Styling is Tailwind utilities over semantic tokens. garn targets the v4 engine (CSS-first config).tailwindcss.com ↗

An @/* path aliasCopied-in files import from @/ — set the @/* alias in your tsconfig (or jsconfig) paths.

init checks all three and prints a fix for each gap — it warns, never blocks. Missing the alias? Add it to your tsconfig.json (use ./src/* with a src/ layout):

tsconfig.json

{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  }
}

On Tailwind v3? garn needs the v4 engine — see the upgrade guide.

Set up your agent

garn is built for AI tools as much as for you — its rules and its whole component reference are machine-readable. Two things make your agent fluent in the system.

1 · The rules file

init writes .garn/rules.md — garn's non-negotiables (semantic tokens, accessibility, the axis vocabulary) plus the component roster. Import it into your CLAUDE.md / AGENTS.md so it's always in context.

2 · The MCP server

Component knowledge — purpose, props, examples, recipes, a11y contracts — isn't copied into your repo; your agent queries it on demand from the garn MCP, a separate install (init reminds you). The CLI wires it into your client, version-matched:

npx garn-ui mcp install

Prefer to do it by hand? claude mcp add garn -- npx -y garn-mcp — Cursor & other clients take the same npx -y garn-mcp command in their MCP config. Six tools — garn_search · garn_view · garn_get_examples · garn_match_recipe · garn_relations · garn_audit. No MCP? Read the hosted /llms-full.txt corpus instead.

Or hand the whole setup to your agent

Every step on this page is agent-runnable. Paste one of these into your coding agent — it installs garn, wires the theme, then reads .garn/rules.md and queries the MCP (or the hosted corpus) before it composes anything.

agent prompt

Set up garn (https://garn-ui.vercel.app) in this project. 1. Run: npx garn-ui init --registry https://garn-ui.vercel.app/r 2. Fix any requirement warnings it prints (React 18+, Tailwind v4, an @/* path alias) and make sure the garn-theme.css import ended up in the global stylesheet. 3. Add the components we need: npx garn-ui add <names> (run "npx garn-ui list" to see what exists). 4. Before composing any UI, read .garn/rules.md and query the garn MCP (or fetch https://garn-ui.vercel.app/llms-full.txt) for component knowledge.

The full machine-readable layer — the six MCP tools, the llms.txt corpus, and the drift-gated pipeline behind them — For agents.

What's next

Browse components

The full roster — every page has live examples, props, a11y contracts, and its exact add command.

Theme it

Remap the --garn-* tokens in the browser, or by editing garn-theme.css — every component follows.

Own the source

Everything the CLI writes is yours to edit — no runtime dependency to outgrow. Re-running add overwrites a component with the latest registry version, so keep local edits in git.

Already using the shadcn CLI?

garn serves standard registry-item JSON, so the shadcn CLI can install garn components too. Register the namespace in your components.json:

components.json

{
  "registries": {
    "@garn": "https://garn-ui.vercel.app/r/{name}.json"
  }
}

npx shadcn@latest add @garn/button

The garn CLI adds a few extras on top (theme auto-wiring, requirement checks, the .garn/ AI layer), but the components land the same either way.