Astro

Astro sites get both lanes of the design system, chosen per page — even per component:

• Content pages (Astro's home turf): @namche/css and ordinary markup in .astro components. Zero client JavaScript, which is why you picked Astro.
• Interactive islands: the @namche registry via @astrojs/react — the same shadcn components as any product, server-rendered by default and hydrated only where you add a client:* directive.

Content pages with @namche/css

pnpm add @namche/css

/* src/styles/global.css */
@import "@namche/css";

Import the stylesheet once (in your base layout or via Astro's global style handling) and write plain HTML with the documented classes. Astro's bundler resolves the package imports; nothing else is needed.

Interactive islands with the registry

Add React and Tailwind v4 to the site:

pnpm astro add react
pnpm add tailwindcss @tailwindcss/vite

// astro.config.mjs
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  integrations: [react()],
  vite: { plugins: [tailwindcss()] },
});

Then follow the standard installation: shadcn init -b base, register @namche in components.json, shadcn add @namche/theme and wire the global stylesheet exactly as documented there. Components land in your own src/components/ui/ and render inside .astro files:

---
import { Button } from "@/components/ui/button";
import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
---

<Button>Static — rendered to HTML, no JS shipped</Button>
<Dialog client:load>…</Dialog>

A component without a client:* directive is rendered to static HTML — free NAMCHE styling with no hydration cost. Reserve client:load / client:visible for components that genuinely need behaviour.

Fonts

Nothing to do: Namche Shadow loads from cdn.namche.ai via the tokens' @font-face rules, and the token stacks already name it. Since @namche/design-tokens 3.0.0 the system is Namche Shadow only, at weight 500, for headlines and running text alike; no token names Geist, so there is nothing to self-host or override.

Design contract

See Foundations for the canonical design rules and Tokens for the framework-neutral Day and Night contract.