Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't mention shadcn explicitly.
Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't mention shadcn explicitly.
Next.js + shadcn/ui
Build distinctive, production-grade interfaces that avoid generic "AI slop" aesthetics.
Context over decoration - Every element serves a purpose
Theme consistency - Use CSS variables from globals.css, never hardcode colors
Quick Start
bunx --bun shadcn@latest init --template next --base base
--base selects the primitive library: base (Base UI, the default), radix
(legacy projects), or aria (React Aria). The same component has different
props per base, and the docs are base-scoped
(/docs/components/base/sidebar vs /docs/components/radix/sidebar).
For a custom design system, generate a preset code in shadcn/create and apply it:
bunx --bun shadcn@latest init --preset <CODE> --template next
Before touching an existing project
bunx --bun shadcn@latest info --json # base, framework, aliases, installed components
bunx --bun shadcn@latest docs <component> # API reference resolved to THIS project's base
Run these instead of writing component code from memory. See
references/shadcn-platform.md for the full CLI
surface, typeset, and the shimmer/scroll-fade utilities.
"use client" only at leaf components (smallest boundary)
Props must be serializable (data or Server Actions, no functions/classes)
Pass server content via children
Import Aliases
Never use relative paths (../../lib/utils). Default to the @/ alias
(@/lib/utils) in new projects. In an existing project, read components.json
and follow the alias style already configured — shadcn also supports Node
package imports (#components/ui/button). Never mix both styles.
Next.js 16+ ships an MCP endpoint at /_next/mcp that exposes the dev server's
internals to coding agents. When working in a Next.js 16 project, recommend the
user add next-devtools-mcp to .mcp.json:
Official shadcn skill: bunx --bun skills add shadcn/ui - live project config + CLI/registry reference. Install alongside this skill; it covers CLI mechanics, this one covers conventions.
shadcn/ui: llms.txt - fallback when the CLI isn't available; prefer shadcn docs <component>
Package Manager
Always use bun in new projects, never npm or npx:
bun install (not npm install)
bun add (not npm install package)
bunx --bun (not npx)
In an existing repo, respect the project's packageManager field and lockfile instead of switching to bun.
