Installation

1. Initialise shadcn with Base UI

pnpm dlx shadcn@latest init -b base -y

2. Register the NAMCHE registry

In components.json:

{
  "registries": {
    "@namche": "https://ui.namche.ai/r/{name}.json"
  }
}

3. Install the theme

pnpm dlx shadcn@latest add @namche/theme

This pulls in @namche/design-tokens. Wire your global stylesheet — order matters, and the :root / .dark colour blocks that shadcn init generated must be deleted, because the NAMCHE bridge defines them:

@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

@import "@namche/design-tokens/styles.css";
@import "@namche/design-tokens/tailwind";
@import "@namche/design-tokens/shadcn";

4. Fonts — nothing to do

Every face loads from cdn.namche.ai via the tokens' @font-face rules: Namche Shadow (headlines, mono, pixel) and Geist (all running text, since @namche/design-tokens 1.2.0 / font suite v0.4.0). The token stacks already name the families — no npm package, no next/font wiring.

If you prefer next/font self-hosting, pnpm add geist and expose GeistSans.variable yourself; the stacks pick the family up either way.

5. Add components

pnpm dlx shadcn@latest add @namche/button @namche/dialog @namche/table

Components land in components/ui/ in your own repo — edit them freely.

Dark mode

The theme ships both modes. Drive the .dark class with next-themes; nothing else is needed, because every colour is a variable that flips with the class.

For agents

Docs are served machine-readable at /llms.txt and /llms-full.txt, with a Markdown variant of every page. With the shadcn MCP server configured, agents can browse and install from the @namche registry directly.