shadcn/ui Component Installer

Overview

This skill ensures proper installation and verification of shadcn/ui components using the official CLI. It prevents manual component creation and validates installations.

Critical Rules

❌ NEVER Manually Create Components

NEVER write shadcn component code manually. Always use the CLI:

pnpm dlx shadcn@latest add <component-name>

✅ Always Use CLI Installation

shadcn/ui provides an official CLI that:

• •Installs components with correct dependencies
• •Adds required CSS variables
• •Ensures proper configuration
• •Maintains consistency

Installation Process

Step 1: Install Component

Use the shadcn CLI to install components:

# Single component
pnpm dlx shadcn@latest add button

# Multiple components
pnpm dlx shadcn@latest add button dialog card

Common components:

• •button - Button component
• •dialog - Dialog/modal component
• •input - Input field
• •form - Form components
• •select - Select dropdown
• •table - Data table
• •dropdown-menu - Dropdown menu
• •popover - Popover component
• •toast - Toast notifications
• •sheet - Sheet/drawer component
• •tabs - Tabs component
• •card - Card component
• •badge - Badge component
• •avatar - Avatar component
• •checkbox - Checkbox input
• •radio-group - Radio button group
• •switch - Switch toggle
• •slider - Slider input
• •textarea - Textarea input
• •label - Label component
• •separator - Separator line

For complete list, see references/component-list.md.

Step 2: Verify Installation Location

After installation, verify the component is in the correct location:

# Check the component was installed to atoms/
ls -la src/components/atoms/<component-name>.tsx

Expected location:

• •All shadcn components → src/components/atoms/
• •File naming: <component-name>.tsx (kebab-case)

Step 3: Check Dependencies

Verify all required dependencies were installed:

# Check package.json for new dependencies
cat package.json | grep -A 20 "dependencies"

Common dependencies shadcn components need:

• •@radix-ui/* - Radix UI primitives
• •class-variance-authority - CVA for variants
• •clsx - Conditional classes
• •tailwind-merge - Merge Tailwind classes
• •lucide-react - Icons (if using icon components)

If missing dependencies, install them:

pnpm install

Step 4: Verify CSS Variables

Check if required CSS variables are present in src/styles/tailwind.css:

# Check for CSS variables
cat src/styles/tailwind.css

Required CSS variables structure:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 47.4% 11.2%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... other dark mode variables */
  }
}

If CSS variables are missing, the shadcn CLI usually adds them automatically. If not, check the component documentation for required variables.

For complete CSS setup, see references/css-setup.md.

Post-Installation Checklist

After installing a component, verify:

• • Component file exists in src/components/atoms/<component-name>.tsx
• • File uses kebab-case naming
• • All dependencies are in package.json
• • Run pnpm install if new dependencies were added
• • CSS variables are present in tailwind.css
• • Component imports without errors
• • TypeScript compilation succeeds

Verification Commands

Run these commands after installation:

# 1. Check component exists
ls src/components/atoms/ | grep <component-name>

# 2. Check dependencies
cat package.json | grep "@radix-ui"

# 3. Check CSS variables
cat src/styles/tailwind.css | grep "layer base"

# 4. Type check
pnpm type

# 5. Test import
# Create a test file or check in existing component

Common Issues & Solutions

Issue: Component not found after installation

Solution:

1. •Check if installation completed successfully
2. •Verify component is in components.json config
3. •Re-run installation command

Issue: Missing dependencies

Solution:

pnpm install

Issue: CSS variables missing

Solution:

1. •Check tailwind.css for @layer base
2. •Manually add missing variables from shadcn docs
3. •Restart dev server

Issue: TypeScript errors

Solution:

1. •Check all dependencies installed: pnpm install
2. •Restart TypeScript server
3. •Check import paths are correct

Usage Examples

Example 1: Installing Button Component

# 1. Install
pnpm dlx shadcn@latest add button

# 2. Verify location
ls src/components/atoms/button.tsx

# 3. Check dependencies
cat package.json | grep "class-variance-authority"

# 4. Use in code
import { Button } from '@/components/atoms/button'

<Button variant="default">Click me</Button>

Example 2: Installing Form Components

# Install multiple form components
pnpm dlx shadcn@latest add form input label

# Verify all installed
ls src/components/atoms/ | grep -E "form|input|label"

# Use together
import { Form } from '@/components/atoms/form'
import { Input } from '@/components/atoms/input'
import { Label } from '@/components/atoms/label'

Example 3: Installing Dialog Component

# Install dialog
pnpm dlx shadcn@latest add dialog

# Check @radix-ui/react-dialog dependency
cat package.json | grep "@radix-ui/react-dialog"

# If missing, install
pnpm install

# Use dialog
import { Dialog, DialogContent, DialogHeader } from '@/components/atoms/dialog'

When Creating Molecule Components

After installing shadcn atoms, you may create molecule wrappers:

1. •shadcn component installed in src/components/atoms/
2. •Create custom wrapper in src/components/molecules/<name>/
3. •Import and extend the atom component
4. •Add business logic and custom behavior

Example:

// src/components/molecules/user-avatar/index.tsx
import { Avatar } from '@/components/atoms/avatar'

export function UserAvatar({ user }: { user: User }) {
  return (
    <Avatar>
      <AvatarImage src={user.avatarUrl} />
      <AvatarFallback>{user.initials}</AvatarFallback>
    </Avatar>
  )
}

Summary

Key Points:

1. •✅ Always use pnpm dlx shadcn@latest add <component>
2. •❌ Never manually create shadcn components
3. •✅ Verify installation in src/components/atoms/
4. •✅ Check dependencies and CSS variables
5. •✅ Run type check after installation
6. •✅ Test component import before using

For more details, see:

• •Component list
• •CSS setup
• •Troubleshooting