Tailwind CSS Colors with shadcn/ui Components

How shadcn/ui Uses Colors

shadcn/ui defines colors as HSL CSS variables in your globals.css. Components reference these variables through Tailwind config, making theme customization straightforward without editing component source code.

Default Color Variables

/* globals.css */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --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%;
    --ring: 221.2 83.2% 53.3%;
  }
}

Customizing Your Brand Colors

To apply brand colors, convert your hex values to HSL format and update the CSS variables. Every shadcn/ui button, card, dialog, and input will automatically adopt your new palette.

/* Custom brand theme */
:root {
  --primary: 262 83% 58%;        /* Purple brand */
  --primary-foreground: 0 0% 100%;
  --secondary: 262 30% 94%;
  --ring: 262 83% 58%;
}
.dark {
  --primary: 262 83% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 262 30% 18%;
  --ring: 262 83% 68%;
}

Tips for shadcn/ui Color Customization

• Always provide foreground variables for each color to ensure text contrast
• Use the shadcn/ui themes page to generate complete variable sets from a single color
• Test both light and dark modes after changing variables
• Keep destructive colors in the red/orange range for intuitive error states