1# shadcn/ui - Setup and Configuration
2 
3## What is shadcn/ui?
4 
5shadcn/ui is **not** a traditional component library or npm package. Instead:
6- It's a **collection of reusable components** that you copy into your project
7- Components are **yours to customize** — you own the code
8- Built with **Radix UI** primitives for accessibility
9- Styled with **Tailwind CSS** utilities
10- Includes CLI tool for easy component installation
11 
12## Installation
13 
14### New Project
15 
16```bash
17npx create-next-app@latest my-app --typescript --tailwind --eslint --app
18cd my-app
19npx shadcn@latest init
20 
21# Install essential components
22npx shadcn@latest add button input form card dialog select
23```
24 
25### Existing Project
26 
27```bash
28npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
29npx shadcn@latest init
30```
31 
32### Installing Components
33 
34```bash
35npx shadcn@latest add button          # single component
36npx shadcn@latest add button input form  # multiple components
37npx shadcn@latest add --all           # all components
38```
39 
40## Required Dependencies
41 
42```json
43{
44  "dependencies": {
45    "@radix-ui/react-accordion": "^1.1.2",
46    "@radix-ui/react-alert-dialog": "^1.0.5",
47    "@radix-ui/react-dialog": "^1.0.5",
48    "@radix-ui/react-dropdown-menu": "^2.0.6",
49    "@radix-ui/react-label": "^2.0.2",
50    "@radix-ui/react-select": "^2.0.0",
51    "@radix-ui/react-separator": "^1.0.3",
52    "@radix-ui/react-slot": "^1.0.2",
53    "@radix-ui/react-toast": "^1.1.5",
54    "class-variance-authority": "^0.7.0",
55    "clsx": "^2.0.0",
56    "lucide-react": "^0.294.0",
57    "tailwind-merge": "^2.0.0",
58    "tailwindcss-animate": "^1.0.7"
59  }
60}
61```
62 
63## TSConfig Configuration
64 
65```json
66{
67  "compilerOptions": {
68    "target": "es5",
69    "lib": ["dom", "dom.iterable", "es6"],
70    "allowJs": true,
71    "skipLibCheck": true,
72    "strict": true,
73    "forceConsistentCasingInFileNames": true,
74    "noEmit": true,
75    "esModuleInterop": true,
76    "module": "esnext",
77    "moduleResolution": "node",
78    "resolveJsonModule": true,
79    "isolatedModules": true,
80    "jsx": "preserve",
81    "incremental": true,
82    "baseUrl": ".",
83    "paths": {
84      "@/components/*": ["./src/components/*"],
85      "@/lib/*": ["./src/lib/*"]
86    }
87  },
88  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
89  "exclude": ["node_modules"]
90}
91```
92 
93## Tailwind Configuration
94 
95```js
96// tailwind.config.js
97/** @type {import('tailwindcss').Config} */
98module.exports = {
99  darkMode: ["class"],
100  content: [
101    './pages/**/*.{ts,tsx}',
102    './components/**/*.{ts,tsx}',
103    './app/**/*.{ts,tsx}',
104    './src/**/*.{ts,tsx}',
105  ],
106  prefix: "",
107  theme: {
108    container: {
109      center: true,
110      padding: "2rem",
111      screens: { "2xl": "1400px" },
112    },
113    extend: {
114      colors: {
115        border: "hsl(var(--border))",
116        input: "hsl(var(--input))",
117        ring: "hsl(var(--ring))",
118        background: "hsl(var(--background))",
119        foreground: "hsl(var(--foreground))",
120        primary: {
121          DEFAULT: "hsl(var(--primary))",
122          foreground: "hsl(var(--primary-foreground))",
123        },
124        secondary: {
125          DEFAULT: "hsl(var(--secondary))",
126          foreground: "hsl(var(--secondary-foreground))",
127        },
128        destructive: {
129          DEFAULT: "hsl(var(--destructive))",
130          foreground: "hsl(var(--destructive-foreground))",
131        },
132        muted: {
133          DEFAULT: "hsl(var(--muted))",
134          foreground: "hsl(var(--muted-foreground))",
135        },
136        accent: {
137          DEFAULT: "hsl(var(--accent))",
138          foreground: "hsl(var(--accent-foreground))",
139        },
140      },
141      borderRadius: {
142        lg: "var(--radius)",
143        md: "calc(var(--radius) - 2px)",
144        sm: "calc(var(--radius) - 4px)",
145      },
146      keyframes: {
147        "accordion-down": {
148          from: { height: "0" },
149          to: { height: "var(--radix-accordion-content-height)" },
150        },
151        "accordion-up": {
152          from: { height: "var(--radix-accordion-content-height)" },
153          to: { height: "0" },
154        },
155      },
156      animation: {
157        "accordion-down": "accordion-down 0.2s ease-out",
158        "accordion-up": "accordion-up 0.2s ease-out",
159      },
160    },
161  },
162  plugins: [require("tailwindcss-animate")],
163}
164```
165 
166## CSS Variables (globals.css)
167 
168```css
169@tailwind base;
170@tailwind components;
171@tailwind utilities;
172 
173@layer base {
174  :root {
175    --background: 0 0% 100%;
176    --foreground: 222.2 84% 4.9%;
177    --card: 0 0% 100%;
178    --card-foreground: 222.2 84% 4.9%;
179    --popover: 0 0% 100%;
180    --popover-foreground: 222.2 84% 4.9%;
181    --primary: 222.2 47.4% 11.2%;
182    --primary-foreground: 210 40% 98%;
183    --secondary: 210 40% 96.1%;
184    --secondary-foreground: 222.2 47.4% 11.2%;
185    --muted: 210 40% 96.1%;
186    --muted-foreground: 215.4 16.3% 46.9%;
187    --accent: 210 40% 96.1%;
188    --accent-foreground: 222.2 47.4% 11.2%;
189    --destructive: 0 84.2% 60.2%;
190    --destructive-foreground: 210 40% 98%;
191    --border: 214.3 31.8% 91.4%;
192    --input: 214.3 31.8% 91.4%;
193    --ring: 222.2 84% 4.9%;
194    --radius: 0.5rem;
195  }
196 
197  .dark {
198    --background: 222.2 84% 4.9%;
199    --foreground: 210 40% 98%;
200    --card: 222.2 84% 4.9%;
201    --card-foreground: 210 40% 98%;
202    --popover: 222.2 84% 4.9%;
203    --popover-foreground: 210 40% 98%;
204    --primary: 210 40% 98%;
205    --primary-foreground: 222.2 47.4% 11.2%;
206    --secondary: 217.2 32.6% 17.5%;
207    --secondary-foreground: 210 40% 98%;
208    --muted: 217.2 32.6% 17.5%;
209    --muted-foreground: 215 20.2% 65.1%;
210    --accent: 217.2 32.6% 17.5%;
211    --accent-foreground: 210 40% 98%;
212    --destructive: 0 62.8% 30.6%;
213    --destructive-foreground: 210 40% 98%;
214    --border: 217.2 32.6% 17.5%;
215    --input: 217.2 32.6% 17.5%;
216    --ring: 212.7 26.8% 83.9%;
217  }
218}
219 
220@layer base {
221  * {
222    @apply border-border;
223  }
224  body {
225    @apply bg-background text-foreground;
226  }
227}
228```
229