shadcn-ui

shadcn/ui Best Practices

Overview

Aspect	Recommendation
Installation	Copy components, don't npm install
Location	components/ui/ directory
Customization	Edit component source directly
Styling	Tailwind CSS + CSS variables

---

Installation

Initial Setup

# Initialize shadcn/ui in your project
npx shadcn@latest init

# Add components as needed
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add dialog

Project Structure

src/
├── components/
│   ├── ui/              # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   └── ...
│   └── custom/          # Your custom components
├── lib/
│   └── utils.ts         # cn() utility
└── styles/
    └── globals.css      # CSS variables

---

Core Utility: cn()

// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { cn } from "@/lib/utils"

// Merge classes safely
<button className={cn(
  "px-4 py-2 rounded-lg",
  isPrimary && "bg-blue-600 text-white",
  isDisabled && "opacity-50 cursor-not-allowed",
  className // Allow custom classes to override
)}>
  Click me
</button>

---

Button Patterns

Button Variants

import { Button } from "@/components/ui/button"

// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><IconPlus /></Button>

// With loading state
<Button disabled={isLoading}>
  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
  {isLoading ? 'Loading...' : 'Submit'}
</Button>

// As child (render as different element)
<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>