shadcn DESIGN.mdNext.js · Tailwind · shadcn/ui

shadcn DESIGN.md templates and guides

Next.js template kits, guides and copyable DESIGN.md files for shadcn/ui — for Cursor, Claude Code and Codex.

35 template kits4 referencesFull shadcn/ui reference →

What is a shadcn DESIGN.md?

shadcn/ui gives agents a component vocabulary — Button, Card, Table, Dialog — but not product usage rules. A shadcn DESIGN.md documents which variants, density, token overrides and layout patterns your product requires so generated UI does not collapse into the default starter look.

components.json configures the shadcn CLI. DESIGN.md configures the agent — which Card variant, which Button size, which table padding profile and which anti-patterns are off-limits for your SaaS or admin product.

How to use with AI coding agents

  • Cursor: copy DESIGN.md to the project root and add a rule: read DESIGN.md before generating UI.
  • Claude Code: reference DESIGN.md from CLAUDE.md so every component edit inherits token and density rules.
  • Codex: include token overrides and component variant tables so Tailwind + shadcn edits stay aligned with your globals.css contract.

Start from a shadcn guide, copy the full reference, or bootstrap from a template kit with runnable Next.js source.

Templates

shadcn DESIGN.md template kits

6 kits with source, tokens and agent context.

View all

Resources

shadcn DESIGN.md guides and reference

Guides, a starter scaffold and the full shadcn/ui DESIGN.md reference.

DESIGN.md for shadcn/ui

Educational guide — why agents need usage rules beyond components.json.

Open →

shadcn/ui DESIGN.md reference

Full copyable contract with tokens, components, states, forms and dashboards.

Open →

shadcn/ui DESIGN.md starter

Short scaffold for variants, density and UI states in a new repo.

Open →

DESIGN.md for shadcn/ui (practical)

Practical rules for keeping shadcn-generated UI specific instead of generic.

Open →

shadcn DESIGN.md — frequently asked questions

Browse all templatesBrowse skillsDashboard