Adopt

Consume the system

Six steps to a Webzenia-powered app: tokens, components, and the governance gates. The full reference is docs/CONSUMING.md in the repo.

Prerequisite: Git access to the private repo github.com/webzenia/webzenia-design-system (SSH key or a PAT with repo scope). Stack: Next.js App Router + Tailwind v4 + pnpm.

Install the tokens

A git dependency on the private repo’s tokens/ folder. Commit the lockfile: it pins the commit and carries the subpath.

shell

pnpm add "github:webzenia/webzenia-design-system#path:/tokens"

Import the token layer

Tailwind’s framework import stays in your app (content detection roots here); the design system follows. Import the entry once in your root layout.

css

/* app/globals.css */
@import "tailwindcss";
@import "@webzenia/tokens/tokens.css";

Ship the fonts

The @font-face rules reference /fonts/*. Copy the bundled woff2 into your public dir.

shell

cp node_modules/@webzenia/tokens/fonts/*.woff2 public/fonts/

Point at the registry

The registry is public, so no auth header. Add it to components.json.

code

"registries": {
  "@webzenia": { "url": "https://design.webzenia.com/r/{name}.json" }
}

Install components

Dependencies resolve transitively. You own the source. Edit it freely.

shell

pnpm dlx shadcn@latest add @webzenia/section-header @webzenia/button @webzenia/text

Inherit the gates

Drop in @webzenia/design-governance so this app’s Claude Code enforces the same rules. After installing the primitives, baseline once.

shell

pnpm audit:system:baseline   # accept the primitive layer, then stay at zero

Verify it’s wired

Render <Text role="display-xl">Hi</Text> — it should paint in the Söhne display face at the right size. If it’s unstyled, the token import (step 02/03) isn’t wired. Then pnpm tsc --noEmit and the three audits should pass.