Shadcn
Initialize shadcn/ui, add components, theme Tailwind, compose product UI, and fix registry or Radix vs Base UI issues with agent-guided CLI workflows.
Overview
shadcn is an agent skill for the Build phase that guides shadcn/ui CLI, component installation, theming, registries, and Tailwind composition for product interfaces.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill shadcnWhat is this skill?
- CLI coverage: init, add, build, search, list, migrate, info, docs, view via shadcn@latest
- Path and bash pattern hooks for monorepo components/ui locations
- Warns when base-ui conflicts with AI Elements Radix APIs (asChild, openDelay)
- Theming, custom registries, composition patterns, and Tailwind integration guidance
- Retrieval aliases for component library, ui components, and tailwind components
- metadata priority: 6
- official docs links: ui.shadcn.com docs and components
Adoption & trust: 439 installs on skills.sh; 187 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need shadcn/ui in a Next or monorepo project but hit init flags, wrong base UI choice, or scattered components/ui paths.
Who is it for?
Indie SaaS builders standardizing on shadcn/ui and Tailwind who want the agent to follow components.json conventions and registry workflows.
Skip if: Projects using only native mobile UI kits with no React web stack, or teams that forbid CLI-generated components.
When should I use this skill?
When initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.
What do I get? / Deliverables
You get correct CLI commands, component adds, theme setup, and composition patterns aligned with official shadcn docs and project layout.
- components.json and ui component files
- Theme and registry configuration guidance
- CLI command sequences for init, add, and migrate
Recommended Skills
Journey fit
shadcn/ui work happens while you are building interfaces and design systems, not during launch SEO or production monitoring. The skill centers components.json, components/ui paths, CLI add/init, and Tailwind theming—classic frontend build tasks.
How it compares
Skill-backed shadcn/ui workflows beat generic CSS advice when you need components.json, registries, and CLI migrations.
Common Questions / FAQ
Who is shadcn for?
Solo builders and small teams shipping React/Next apps with shadcn/ui, Tailwind, and optional custom registries.
When should I use shadcn?
During build frontend work when initializing shadcn, adding components, composing UI, configuring themes, or troubleshooting component issues.
Is shadcn safe to install?
Review the Security Audits panel on this Prism page; CLI commands modify your repo and pull packages—verify sources before running in production branches.
SKILL.md
READMESKILL.md - Shadcn
# shadcn/ui You are an expert in shadcn/ui — a collection of beautifully designed, accessible, and customizable React components built on Radix UI primitives and Tailwind CSS. Components are added directly to your codebase as source code, not installed as a dependency. ## Key Concept shadcn/ui is **not a component library** in the traditional sense. You don't install it as a package. Instead, the CLI copies component source code into your project, giving you full ownership and customization ability. ## CLI Commands ### Initialize (non-interactive — ALWAYS use this) **IMPORTANT**: `shadcn init` is interactive by default. Always use `-d` (defaults) for non-interactive initialization: ```bash # Non-interactive init with defaults — USE THIS npx shadcn@latest init -d # Non-interactive with a preset (recommended for consistent design systems) npx shadcn@latest init --preset <code> -f # Non-interactive with explicit base library choice npx shadcn@latest init -d --base radix npx shadcn@latest init -d --base base-ui # Scaffold a full project template (CLI v4) ``` > **AI Elements compatibility**: Always use `--base radix` (the default) when the project uses or may use AI Elements. AI Elements components rely on Radix APIs and have type errors with Base UI. ```bash npx shadcn@latest init --template next -d npx shadcn@latest init --template vite -d ``` Options: - `-d, --defaults` — **Use default configuration, skip all interactive prompts** (REQUIRED for CI/agent use) - `-y, --yes` — Skip confirmation prompts (does NOT skip library selection — use `-d` instead) - `-f, --force` — Force overwrite existing configuration - `-t, --template` — Scaffold full project template (`next`, `vite`, `react-router`, `astro`, `laravel`, `tanstack-start`) - `--preset` — Apply a design system preset (colors, theme, icons, fonts, radius) as a single shareable code - `--base` — Choose primitive library: `radix` (default) or `base-ui` - `--monorepo` — Set up a monorepo structure > **WARNING**: `-y`/`--yes` alone does NOT make init fully non-interactive — it still prompts for component library selection. Always use `-d` to skip ALL prompts. > **Deprecated in CLI v4**: `--style`, `--base-color`, `--src-dir`, `--no-base-style`, and `--css-variables` flags are removed and will error. The `registry:build` and `registry:mcp` registry types are also deprecated. Use `registry:base` and `registry:font` instead. The init