garn

Installation

Add garn to an existing React and Tailwind v4 project, or start with a new Next.js or Vite app. The CLI sets up the shared theme and copies the components you choose into your project as source.

Install

Already have a React + Tailwind project?

Run this from the project root. It initializes garn and adds your first components in one step:

npx garn-ui install button card dialog

Use --yes for a non-interactive setup, such as CI. Prefer to initialize first and add components later? Use the step-by-step path below.

1
Initialize garn
Writes a garn.json config, the base files every component shares (the cn helper, the token theme, and a project rules file at .garn/rules.md). It points at the hosted registry by default; --registry accepts a URL or local directory. Missing React, Tailwind, or the alias? In a terminal, init offers the relevant fix.
npx garn-ui init
2
Check the theme import
init adds the theme import to your global stylesheet when it can find one. If it cannot, add it directly after the Tailwind import. This is the only stylesheet import garn requires.
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? Run add with no names to pick from a checklist in your terminal — or 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 19+garn components work in React applications and frameworks. garn does not scaffold or impose a framework.react.dev ↗

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

Node.js 20+The garn CLI runs on Node.js 20 or newer.nodejs.org ↗

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

init checks the React, Tailwind, and alias requirements and, in a terminal, offers to fix a missing one. In CI or a pipe (or with --yes) it applies or prints the fix without ever blocking. 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 AI agent

garn works without an AI client. If you use one, hand it the setup — or wire the two pieces yourself below.

Paste the setup into your agent

agent prompt

Set up garn (https://garn.ohuba.com) in this project. 1. Run: npx garn-ui init --yes 2. Check that the garn-theme.css import landed in the global stylesheet. 3. Add components: npx garn-ui add <names> (npx garn-ui list shows the roster). 4. Before writing UI, read .garn/rules.md and query the garn MCP: garn_search to find, garn_view + garn_get_examples to learn, garn_audit to check your work. No MCP? Fetch https://garn.ohuba.com/llms-full.txt.

1 · Project rules

init writes garn's token, accessibility, and usage rules to .garn/rules.md. Import it from your agent's memory file so it's in every session:

CLAUDE.md

@.garn/rules.md

Using AGENTS.md? Add: “Before writing any UI, read .garn/rules.md and follow it.”

2 · The MCP server

Lets your agent search components, read the reference, pull examples and recipes, and audit its own compositions. init offers to register it — or run it anytime, for Claude Code, Cursor, or VS Code:

npx garn-ui mcp install

By hand: claude mcp add garn -- npx -y garn-mcp — other clients take npx -y garn-mcp in their MCP config.

No MCP client? The same knowledge is served flat at /llms-full.txt. What the machine-readable layer contains — and the full agent workflow — is on the For agents page.

What's next

Browse components

The full roster — every page has live examples, props, accessibility and keyboard behaviour, and its exact add command.

Own the source

Everything the CLI writes is yours to edit — no runtime dependency to outgrow. Re-running add updates a component to the latest registry version (asking before it replaces your edits), and npx garn-ui status shows which copied-in components you've edited locally.

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.ohuba.com/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.