shadcn/ui

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

IMPORTANT: Run all CLI commands using the project's package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest — based on the project's packageManager. Examples below use npx shadcn@latest but substitute the correct runner for the project.

When to Use

• Use when adding new components from shadcn/ui or community registries.
• Use when styling, composing, or debugging existing shadcn/ui components.
• Use when initializing a new project or switching design system presets.
• Use to retrieve component documentation, examples, and API references.

Current Project Context

Read components.json, the package manifest/lockfile and the installed component source first. If the approved CLI is available, run its info command in the intended project directory and inspect errors directly. Skill Markdown does not inject command output automatically; do not interpret the command text as project JSON or treat any CLI failure as evidence that initialization is needed.

Use the project's existing approved CLI version and package runner when available. The @latest examples download and execute a mutable npm package; establish the intended version and registry before running them.

Principles