Installation

Start with a Next.js app with Tailwind v4. Let your AI assistant do it, or follow the steps by hand.

Set up with AI

Paste this into Claude Code, Cursor, Codex or any coding assistant inside your project. It runs the exact steps below.

Setup prompt

Set up Parlemen UI in this Next.js project. Parlemen UI is a shadcn-compatible component registry.
Docs for you: https://ui.parlemen.dev/llms.txt

Do these steps in order, using this project's package manager (npx / pnpm dlx / yarn dlx / bunx):

1. If there is no components.json, run: shadcn@latest init -b radix
   (Use the Radix base. Do not use the default base.)
2. Add the registry: shadcn@latest registry add "@parlemen=https://ui.parlemen.dev/r/{name}.json"
3. Install the theme and providers: shadcn@latest add @parlemen/theme @parlemen/providers
4. In app/layout.tsx:
   - Replace the globals.css import with: import "./parlemen.css";
   - Load fonts from next/font/google: Bricolage_Grotesque as variable "--font-display" and JetBrains_Mono as variable "--font-code". Put both .variable classes on <html>.
   - Add suppressHydrationWarning to <html>.
   - Wrap {children} in <Providers> from "@/components/ui/providers".
5. Install the components I need, e.g.: shadcn@latest add @parlemen/button @parlemen/card
6. Replace app/page.tsx with a small demo that uses a Card with a Button inside, then run the type checker and fix any errors.

Rules when writing UI code afterwards:
- Only semantic colour classes: bg-primary text-on-primary, bg-surface, bg-surface-sunken, text-on-surface, text-on-surface-muted. Roles: primary, secondary, tertiary, accent, success, warning, danger, info. No hex, no palette classes.
- Clay look: raised = bg-surface shadow-clay-sm, sunken = bg-surface-sunken shadow-well, no hard borders.
- Icons from @phosphor-icons/react only (weight="bold"; "fill" for active).
- Components take color + variant props, e.g. <Button variant="soft" color="danger">.

Set up by hand

Pick your package manager; every command on the site follows your choice.

1. Initialise shadcn

Use the Radix base. Parlemen components are built on Radix primitives, and the newer default base uses a different API.

pnpm dlx shadcn@latest init -b radix

2. Add the Parlemen registry

Once per project. This saves the @parlemen namespace in components.json, so the CLI, the shadcn MCP server and AI assistants can all find our components.

pnpm dlx shadcn@latest registry add "@parlemen=https://ui.parlemen.dev/r/{name}.json"

3. Install the theme and providers

Tokens (tonal scales, semantic roles, light and dark, clay shadows) land in app/parlemen.css. Providers wires up dark mode, motion and icon defaults.

pnpm dlx shadcn@latest add @parlemen/theme @parlemen/providers

4. Wire up the layout

Import parlemen.css instead of globals.css, load the two fonts, and wrap the app in Providers.

// app/layout.tsx
import { Bricolage_Grotesque, JetBrains_Mono } from "next/font/google";
import "./parlemen.css";
import { Providers } from "@/components/ui/providers";

const display = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-display" });
const code = JetBrains_Mono({ subsets: ["latin"], variable: "--font-code" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning className={`${display.variable} ${code.variable}`}>
      <body className="antialiased">
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

5. Add components

pnpm dlx shadcn@latest add @parlemen/button @parlemen/card @parlemen/dialog