66-stack-shadcn

Shadcn UI Stack Rules

Installation

Adding Components

# ✅ Use the CLI — never copy manually
npx shadcn@latest add button
npx shadcn@latest add card dialog

# Add multiple at once
npx shadcn@latest add button card input label

Configuration

Ensure components.json exists with proper settings:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

---

Class Name Management

The cn() Helper (MANDATORY)

// ✅ Always use cn() for conditional classes
import { cn } from "@/lib/utils";

<div className={cn(
  "base-class",
  condition && "conditional-class",
  variant === "primary" && "bg-primary text-primary-foreground"
)} />

Implementation

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

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

Why cn()?

• Resolves Tailwind class conflicts (e.g., p-2 vs p-4)
• Handles conditional classes cleanly
• Supports arrays and objects

---

Theming

CSS Variables

Define in globals.css:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    /* ... other variables */
  }

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

Theme Switching

// Use next-themes or similar
import { ThemeProvider } from "next-themes";

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>