React and Tailwind

Install the poimandres shadcn preset and theme in a React app using Tailwind v4.

Summary

The preset and theme registry items bring the pmndrs colours, fonts and radius to React apps using Tailwind v4. Start a new app with the preset, or add the theme to an existing shadcn project.

New project

Create a Next.js app with the poimandres preset:

npx shadcn@latest init @pmndrs/preset \
  --template next --name my-app --no-monorepo
cd my-app

One command configures shadcn, installs Inter, Inconsolata and the light and dark palette, and declares the @pmndrs registry. You can also use another template supported by shadcn.

Existing shadcn project

From an app already configured with shadcn and Tailwind v4, add the theme:

pnpm dlx shadcn@latest add @pmndrs/theme

This adds the pmndrs palette and mono font to your current setup. To add shared resources by name, use the @pmndrs namespace.

First component

Add a shadcn button:

pnpm dlx shadcn@latest add button

It uses the theme automatically. Standard shadcn classes such as bg-background and text-foreground work alongside the Material Design 3 colour roles:

app/page.tsx
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <main className="min-h-screen bg-background p-8 text-foreground">
      <section className="flex flex-col items-start gap-4 rounded-lg bg-surface-dim p-6">
        <h1 className="text-2xl font-semibold">Hello, Poimandres</h1>
        <p className="text-on-surface-variant">
          Shared colours, ready to use.
        </p>
        <Button>Get started</Button>
      </section>
    </main>
  )
}

Add the dark class to <html> to switch the entire palette to its dark scheme.

Versioning

The @pmndrs namespace and hosted URLs follow main. For a fresh app with a released theme, configure the preset by code, then add the pinned theme:

npx shadcn@latest init --preset b1VlIttI \
  --template next --name my-app --no-monorepo
cd my-app
npx shadcn@latest add pmndrs/design-system/theme#v0.9.0

See Versioning for item refs and dependencies. Explore the registry catalog to add shared assets, tokens and other resources.

Edit this page