ShadCN/UI Expert Skill

Overview

ShadCN/UI is a collection of beautifully-designed, accessible components built with TypeScript, Tailwind CSS, and headless UI primitives (Base UI or Radix UI). Unlike traditional component libraries, ShadCN uses a copy-paste model - components are copied into YOUR project, giving you full ownership and customization control.

Core Principle: You own the code. Components live in your project (typically src/components/ui/), not in node_modules. This fundamentally changes how you think about customization - edit the source directly.

When to Use

Choose ShadCN When:

• Building React apps needing accessible, polished components
• You want full control over component code (not locked to library updates)
• Using Tailwind CSS for styling
• Need consistent design system with customization flexibility
• Building forms with validation (React Hook Form + Zod integration)

Base Library Selection