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