Skip to content
garn
Get started
Radix + Tailwind v4

Design system for humans and AI

Components you copy in and own, plus a knowledge base your tools can query over MCP.

Browse componentsGet started
npx garn-ui add button

  • You own it

    Copied in as source, not installed as a dependency. Every file is yours to edit.

  • Radix + Tailwind

    All components — unstyled primitives under a semantic token layer, themed end to end.

  • Accessible

    154 machine-checked accessibility contracts, exercised by the test suite.

  • Built for agents

    A knowledge base your tools query over MCP, instead of guessing at an API.

Build distinctive data-rich interfaces with 80+ ownable componentsand an MCP server that helps agents discover, compose, and validate them

Browse all components

Button

Action emphasis on one axis, colour intent on the other — plus split, loading, and icon-only.

Combobox

A searchable single-select with accent-insensitive matching, grouped options, and async loading.

Command

An agent-native ⌘K palette — nested pages, ranked recents, per-item shortcuts, async states.

Dialog

A modal surface with focus trapping, scroll locking, and a title contract that can't be skipped.

Tabs

Underline, pill, or enclosed — the indicator geometry swaps, the keyboard model never does.

Table

Semantic table primitives plus sorting, selection, pinned columns, resize, and pagination.

Chart

Token-themed chart primitives — container, config, tooltip, legend — composed over Recharts.

Calendar

Single, multiple, or range, with min/max bounds, unavailable dates, and clamped navigation.

App Shell

The page frame — a tinted canvas, a sidebar, a content panel, and an optional detail aside.