Installing a pattern

What a pattern expects from your project and how to add it.

Requirements

React 19 — a few patterns rely on ref cleanup and the `inert` prop
Tailwind CSS v4
shadcn design tokens (background, foreground, card, muted, border …) — patterns use only these, so they inherit your palette
npm packages: motion and lucide-react; some also use react-dom

Three steps

1
Copy the install command from the pattern page. For Pro patterns it carries your personal token.
2
Run it — the shadcn CLI writes the files into components/patterns/<slug>/ and installs the missing packages.
3
Read the README next to the code: it names the entry component and the callbacks where your backend plugs in.

$npx shadcn@latest add …/registry.json

Without the CLI

Download the .zip from the pattern page and drop the folder anywhere in your project. Every file imports only npm packages and its own neighbours, so nothing else needs rewiring.

With an AI agent

Each pattern page has a “Copy AI prompt” button. It copies a task for Claude Code, Cursor or a similar agent: install the pattern, read its README, place the component and wire it to real data without touching your design tokens.