shadcn/ui
A collection of accessible, copy-paste React UI components built on Radix UI primitives and styled with Tailwind CSS — notably NOT a published npm package but a CLI-driven source code distribution model where components are owned by the consuming project.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Components run client-side in React; no server-side auth or secrets involved. Radix UI primitives have a strong accessibility and security track record. Agents should audit the Radix UI dependency versions installed alongside shadcn components.
⚡ Reliability
Best When
Building a React application with Tailwind CSS where you want accessible, customizable UI primitives you fully own and can modify without fighting a third-party library's API.
Avoid When
Your project does not use React and Tailwind, or you need a traditional versioned component library with automated update management.
Use Cases
- • Add a pre-built, accessible Button, Dialog, or DataTable component to a React project using 'npx shadcn@latest add button' which copies the component source into your project
- • Bootstrap a new Next.js or Vite project with a complete shadcn/ui component library via 'npx shadcn@latest init' which installs dependencies and sets up the components.json config
- • Customize a copied component's appearance or behavior directly in its source file (e.g., src/components/ui/button.tsx) without forking a library or overriding styles
- • Apply consistent theming across all components by modifying CSS custom properties (--primary, --background, --radius, etc.) in global CSS, which all shadcn components inherit
- • Use shadcn's registry system to share custom components across projects via a JSON registry URL, enabling teams to distribute their own extended component collections
Not For
- • Projects not using React — shadcn/ui components are React-specific (JSX, hooks) with no Vue, Svelte, or framework-agnostic versions in the official registry
- • Projects without Tailwind CSS — shadcn components are styled entirely with Tailwind utility classes and cannot be used without a working Tailwind setup
- • Teams expecting a traditional versioned npm dependency with changelogs and semver guarantees — because components are copied into your repo, you own the update cycle manually
Interface
Authentication
CLI tool and local source code — no authentication needed.
Pricing
Open source under MIT license. Components are copied into your project and freely modifiable.
Agent Metadata
Known Gotchas
- ⚠ CRITICAL DISTRIBUTION MODEL: shadcn/ui is NOT an npm package — 'npx shadcn add' copies component source files directly into your project; there is no node_modules/shadcn to import from, and components are not updated automatically
- ⚠ components.json must be initialized via 'npx shadcn init' before adding components; running 'shadcn add' without it fails with a config-not-found error
- ⚠ Radix UI primitive packages (@radix-ui/react-dialog, etc.) ARE installed as npm dependencies when you add components; agents must ensure package.json is committed with these additions
- ⚠ CSS variable theming requires specific variable names (--primary, --secondary, --background, etc.) defined in global CSS; changing Tailwind theme colors without updating these variables breaks the component palette
- ⚠ The 'shadcn add' command may overwrite existing customizations to a component if re-run with --overwrite; agents must treat copied component files as owned source code and not re-add without diffing first
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for shadcn/ui.
Scores are editorial opinions as of 2026-03-06.