ShadCN Cheatsheet

✅ Initial Setup

# Install shadcn/ui CLI
npx shadcn-ui@latest init

During setup, you'll choose:

• Framework (Next.js, Vite, etc.)
• Tailwind CSS config
• Components directory (default: components)
• Alias for imports (optional)

📦 Installing Components

npx shadcn-ui@latest add [component]

Example:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input

Multiple components:

npx shadcn-ui@latest add button card input

🧩 Popular Components

🎨 Theming

Change Theme Colors

Update Tailwind config:

theme: {
  extend: {
    colors: {
      primary: 'hsl(var(--primary))',
      // etc.
    }
  }
}

Modify Default Theme

Edit components/theme.ts or tailwind.config.js

🛠️ Customization

Change Component Output Directory

npx shadcn-ui@latest init
# Select or type a new directory (e.g. `ui` or `components/ui`)

Customize Tailwind Colors

npx shadcn-ui@latest add theme

🔁 Updating Components

npx shadcn-ui@latest add [component] --overwrite

🧪 Testing Setup

ShadCN doesn’t include tests by default. Use:

• @testing-library/react
• vitest or jest

Example:

npm install --save-dev @testing-library/react @testing-library/jest-dom

🧱 Folder Structure (Recommended)

components/
│
├── ui/           # All ShadCN UI components
│   ├── button.tsx
│   ├── card.tsx
│   └── ...
├── shared/       # Your own custom UI components
├── layout/       # Layout wrappers

🧰 Useful Commands Summary

🌐 Docs & More

• Official Docs: https://ui.shadcn.com
• GitHub: https://github.com/shadcn/ui