Introduction

A React design system with an MCP server.

garn is 86 accessible React components you copy into your project as source, plus a metadata layer that documents them — rendered here as docs, and queryable by coding agents over MCP.

Source distribution

garn is not installed as a runtime dependency. The CLI fetches each component from a registry — JSON files describing the component's source, files, and dependencies — and writes the source into your repo under your own aliases. From that point the code is yours to read, edit, and extend; there is no package to stay compatible with.

Updates are explicit. status reports which copied files were locally edited, and re-running add replaces a file only when you allow it (--overwrite / --no-overwrite). garn never merges registry updates into your edits.

One metadata source, two interfaces

Every component ships a typed metadata contract next to its source: what it is for and not for, props and variants, canonical examples, accessibility contracts, keyboard model, and how it composes with other components — the judgment that is not derivable from the TypeScript types.

That one source is rendered twice. For people, it generates these docs. For coding agents, it is served by the MCP server (search, view, examples, recipe matching, relations, and composition audits) and as flat text (llms.txt, per-component markdown). The two cannot disagree, because both are generated from the same files. The agent tooling is optional: the CLI and the components work without an AI client.

What is included

86 components built on Radix primitives and Tailwind v4, covering forms, navigation, overlays, feedback, tables, filters, charts, scheduling, and data-heavy views. Styling goes through semantic tokens (bg-brand-solid, border-input, text-muted-foreground), so re-theming means editing --garn-* variables, not component code.

Interactions are keyboard-complete, and each component's accessibility requirements are recorded as machine-checkable contracts exercised by its tests. Utility hooks ship the same copy-in way as components.

User-facing packages

garn-ui: The CLI, on npm. It provides the garn command — run it as npx garn-ui <command>.
garn-mcp: The MCP server, on npm. Registered in your client by npx garn-ui mcp install; runs from npx.

FAQ

I edited a copied component. What happens on the next add?

Nothing automatic. status shows the file as edited; re-running add asks before replacing it, or follows --overwrite / --no-overwrite in non-interactive runs. Keep your project in version control and review the diff like any other change.

Do I need an AI coding agent to use garn?

No. The docs carry the same guidance the MCP server serves. The agent tooling is a second interface to the metadata, not a requirement.

Can I install garn components with the shadcn CLI?

Yes — the registry serves standard registry-item JSON. See the installation guide for the components.json entry.