Feedback Colorsfor shadcn/ui

Found an awesome theme? Consider supporting me.

Built by jlndev Buy me a coffee

Generate Colors

Add to Tailwind Config

Make sure you followed the installation guide for shadcn/ui.

Add the colors to your config file. (Nested under theme ➡︎ extend ➡︎ colors). Just search for destructive in your current config and insert it below.

tailwind.config.js

destructive: {
  DEFAULT: "hsl(var(--destructive))",
  foreground: "hsl(var(--destructive-foreground))",
},
success: {
  DEFAULT: "hsl(var(--success))",
  foreground: "hsl(var(--success-foreground))",
},
warning: {
  DEFAULT: "hsl(var(--warning))",
  foreground: "hsl(var(--warning-foreground))",
},
info: {
  DEFAULT: "hsl(var(--info))",
  foreground: "hsl(var(--info-foreground))",
}

Add Styles

globals.css

@layer base {
    :root {
      --destructive: 0 90% 70%;
      --destructive-foreground: 0 90% 10%;
      --success: 125 90% 70%;
      --success-foreground: 125 90% 10%;
      --warning: 45 90% 70%;
      --warning-foreground: 45 90% 10%;
      --info: 197 90% 70%;
      --info-foreground: 197 90% 10%;
    }
  
    .dark {
      --destructive: 6 90% 11%;
      --destructive-foreground: 6 90% 71%;
      --success: 105 90% 11%;
      --success-foreground: 105 90% 51%;
      --warning: 21 90% 11%;
      --warning-foreground: 21 90% 71%;
      --info: 195 90% 11%;
      --info-foreground: 195 90% 51%;
    }
  }

Optional: Add Variants

Add new variants to your components.

@/components/ui/button.tsx

destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border border-destructive-foreground/10",
success: "bg-success text-success-foreground hover:bg-success/90 border border-success-foreground/10",
warning: "bg-warning text-warning-foreground hover:bg-warning/90 border border-warning-foreground/10",
info: "bg-info text-info-foreground hover:bg-info/90 border border-info-foreground/10"