Source from repo
UI Styling Skill

AI-powered UI styling skill with 67 UI styles and 161 reasoning rules for professional interface design.
nextlevelbuilderGitHub nextlevelbuilderSource repo Original GitHub link Publisher page
Files
Skill
n/a
Size
5.5 MB
Entrypoint
SKILL.md
Format
git-repo
Open file
references/shadcn-theming.md

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
markdown374 linesFree
references/shadcn-theming.md
1# shadcn/ui Theming & Customization
2 
3Theme configuration, CSS variables, dark mode, and component customization.
4 
5## Dark Mode Setup
6 
7### Next.js App Router
8 
9**1. Install next-themes:**
10```bash
11npm install next-themes
12```
13 
14**2. Create theme provider:**
15```tsx
16// components/theme-provider.tsx
17"use client"
18 
19import * as React from "react"
20import { ThemeProvider as NextThemesProvider } from "next-themes"
21 
22export function ThemeProvider({
23  children,
24  ...props
25}: React.ComponentProps<typeof NextThemesProvider>) {
26  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
27}
28```
29 
30**3. Wrap app:**
31```tsx
32// app/layout.tsx
33import { ThemeProvider } from "@/components/theme-provider"
34 
35export default function RootLayout({ children }) {
36  return (
37    <html lang="en" suppressHydrationWarning>
38      <body>
39        <ThemeProvider
40          attribute="class"
41          defaultTheme="system"
42          enableSystem
43          disableTransitionOnChange
44        >
45          {children}
46        </ThemeProvider>
47      </body>
48    </html>
49  )
50}
51```
52 
53**4. Theme toggle component:**
54```tsx
55import { Moon, Sun } from "lucide-react"
56import { useTheme } from "next-themes"
57import { Button } from "@/components/ui/button"
58 
59export function ThemeToggle() {
60  const { setTheme, theme } = useTheme()
61 
62  return (
63    <Button
64      variant="ghost"
65      size="icon"
66      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
67    >
68      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
69      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
70      <span className="sr-only">Toggle theme</span>
71    </Button>
72  )
73}
74```
75 
76### Vite / Other Frameworks
77 
78Use similar approach with next-themes or implement custom solution:
79 
80```javascript
81// Store preference
82function toggleDarkMode() {
83  const isDark = document.documentElement.classList.toggle('dark')
84  localStorage.setItem('theme', isDark ? 'dark' : 'light')
85}
86 
87// Initialize on load
88if (localStorage.theme === 'dark' ||
89    (!('theme' in localStorage) &&
90     window.matchMedia('(prefers-color-scheme: dark)').matches)) {
91  document.documentElement.classList.add('dark')
92}
93```
94 
95## CSS Variable System
96 
97shadcn/ui uses CSS variables for theming. Variables defined in `globals.css`:
98 
99```css
100@layer base {
101  :root {
102    --background: 0 0% 100%;
103    --foreground: 222.2 84% 4.9%;
104    --primary: 222.2 47.4% 11.2%;
105    --primary-foreground: 210 40% 98%;
106    --secondary: 210 40% 96.1%;
107    --secondary-foreground: 222.2 47.4% 11.2%;
108    --muted: 210 40% 96.1%;
109    --muted-foreground: 215.4 16.3% 46.9%;
110    --accent: 210 40% 96.1%;
111    --accent-foreground: 222.2 47.4% 11.2%;
112    --destructive: 0 84.2% 60.2%;
113    --destructive-foreground: 210 40% 98%;
114    --border: 214.3 31.8% 91.4%;
115    --input: 214.3 31.8% 91.4%;
116    --ring: 222.2 84% 4.9%;
117    --radius: 0.5rem;
118  }
119 
120  .dark {
121    --background: 222.2 84% 4.9%;
122    --foreground: 210 40% 98%;
123    --primary: 210 40% 98%;
124    --primary-foreground: 222.2 47.4% 11.2%;
125    --secondary: 217.2 32.6% 17.5%;
126    --secondary-foreground: 210 40% 98%;
127    --muted: 217.2 32.6% 17.5%;
128    --muted-foreground: 215 20.2% 65.1%;
129    --accent: 217.2 32.6% 17.5%;
130    --accent-foreground: 210 40% 98%;
131    --destructive: 0 62.8% 30.6%;
132    --destructive-foreground: 210 40% 98%;
133    --border: 217.2 32.6% 17.5%;
134    --input: 217.2 32.6% 17.5%;
135    --ring: 212.7 26.8% 83.9%;
136  }
137}
138```
139 
140### Color Format
141 
142Values use HSL format without `hsl()` wrapper for better opacity control:
143```css
144--primary: 222.2 47.4% 11.2%;  /* H S L */
145```
146 
147Usage in Tailwind:
148```css
149background: hsl(var(--primary));
150background: hsl(var(--primary) / 0.5);  /* 50% opacity */
151```
152 
153## Tailwind Configuration
154 
155Map CSS variables to Tailwind utilities:
156 
157```ts
158// tailwind.config.ts
159export default {
160  darkMode: ["class"],
161  theme: {
162    extend: {
163      colors: {
164        border: "hsl(var(--border))",
165        input: "hsl(var(--input))",
166        ring: "hsl(var(--ring))",
167        background: "hsl(var(--background))",
168        foreground: "hsl(var(--foreground))",
169        primary: {
170          DEFAULT: "hsl(var(--primary))",
171          foreground: "hsl(var(--primary-foreground))",
172        },
173        secondary: {
174          DEFAULT: "hsl(var(--secondary))",
175          foreground: "hsl(var(--secondary-foreground))",
176        },
177        destructive: {
178          DEFAULT: "hsl(var(--destructive))",
179          foreground: "hsl(var(--destructive-foreground))",
180        },
181        muted: {
182          DEFAULT: "hsl(var(--muted))",
183          foreground: "hsl(var(--muted-foreground))",
184        },
185        accent: {
186          DEFAULT: "hsl(var(--accent))",
187          foreground: "hsl(var(--accent-foreground))",
188        },
189      },
190      borderRadius: {
191        lg: "var(--radius)",
192        md: "calc(var(--radius) - 2px)",
193        sm: "calc(var(--radius) - 4px)",
194      },
195    },
196  },
197}
198```
199 
200## Color Customization
201 
202### Method 1: Update CSS Variables
203 
204Change colors by modifying CSS variables in `globals.css`:
205 
206```css
207:root {
208  --primary: 262.1 83.3% 57.8%;  /* Purple */
209  --primary-foreground: 210 20% 98%;
210}
211 
212.dark {
213  --primary: 263.4 70% 50.4%;  /* Darker purple */
214  --primary-foreground: 210 20% 98%;
215}
216```
217 
218### Method 2: Theme Generator
219 
220Use shadcn/ui theme generator: https://ui.shadcn.com/themes
221 
222Select base color, generate theme, copy CSS variables.
223 
224### Method 3: Multiple Themes
225 
226Create theme variants with data attributes:
227 
228```css
229[data-theme="violet"] {
230  --primary: 262.1 83.3% 57.8%;
231  --primary-foreground: 210 20% 98%;
232}
233 
234[data-theme="rose"] {
235  --primary: 346.8 77.2% 49.8%;
236  --primary-foreground: 355.7 100% 97.3%;
237}
238```
239 
240Apply theme:
241```tsx
242<div data-theme="violet">
243  <Button>Violet theme</Button>
244</div>
245```
246 
247## Component Customization
248 
249Components live in your codebase - modify directly.
250 
251### Customize Variants
252 
253```tsx
254// components/ui/button.tsx
255const buttonVariants = cva(
256  "inline-flex items-center justify-center rounded-md text-sm font-medium",
257  {
258    variants: {
259      variant: {
260        default: "bg-primary text-primary-foreground",
261        destructive: "bg-destructive text-destructive-foreground",
262        outline: "border border-input bg-background",
263        // Add custom variant
264        gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
265      },
266      size: {
267        default: "h-10 px-4 py-2",
268        sm: "h-9 rounded-md px-3",
269        lg: "h-11 rounded-md px-8",
270        // Add custom size
271        xl: "h-14 rounded-md px-10 text-lg",
272      },
273    },
274    defaultVariants: {
275      variant: "default",
276      size: "default",
277    },
278  }
279)
280```
281 
282Usage:
283```tsx
284<Button variant="gradient" size="xl">Custom Button</Button>
285```
286 
287### Customize Styles
288 
289Modify base styles in component:
290 
291```tsx
292// components/ui/card.tsx
293const Card = React.forwardRef<
294  HTMLDivElement,
295  React.HTMLAttributes<HTMLDivElement>
296>(({ className, ...props }, ref) => (
297  <div
298    ref={ref}
299    className={cn(
300      "rounded-xl border bg-card text-card-foreground shadow-lg",  // Modified
301      className
302    )}
303    {...props}
304  />
305))
306```
307 
308### Override with className
309 
310Pass additional classes to override:
311 
312```tsx
313<Card className="border-2 border-purple-500 shadow-2xl hover:scale-105 transition-transform">
314  Custom styled card
315</Card>
316```
317 
318## Base Color Presets
319 
320shadcn/ui provides base color presets during `init`:
321 
322- **Slate**: Cool gray tones
323- **Gray**: Neutral gray
324- **Zinc**: Warm gray
325- **Neutral**: Balanced gray
326- **Stone**: Earthy gray
327 
328Select during setup or change later by updating CSS variables.
329 
330## Style Variants
331 
332Two component styles available:
333 
334- **Default**: Softer, more rounded
335- **New York**: Sharp, more contrast
336 
337Select during `init` or in `components.json`:
338 
339```json
340{
341  "style": "new-york",
342  "tailwind": {
343    "cssVariables": true
344  }
345}
346```
347 
348## Radius Customization
349 
350Control border radius globally:
351 
352```css
353:root {
354  --radius: 0.5rem;  /* Default */
355  --radius: 0rem;    /* Sharp corners */
356  --radius: 1rem;    /* Rounded */
357}
358```
359 
360Components use radius variable:
361```tsx
362className="rounded-lg"  /* Uses var(--radius) */
363```
364 
365## Best Practices
366 
3671. **Use CSS Variables**: Enables runtime theme switching
3682. **Consistent Foreground Colors**: Pair each color with appropriate foreground
3693. **Test Both Themes**: Verify components in light and dark modes
3704. **Semantic Naming**: Use `destructive` not `red`, `muted` not `gray`
3715. **Accessibility**: Maintain sufficient color contrast (WCAG AA minimum)
3726. **Component Overrides**: Use `className` prop for one-off customization
3737. **Extract Patterns**: Create custom variants for repeated customizations
374
Preparing the source view

UI Styling Skill

references/shadcn-theming.md
