Over 10000 Themes for shadcn/ui available.

Explore themes

Feedback Colorsfor shadcn/ui

2 spots left

Get a MVP of your project idea within 2 weeks. Guaranteed.

1

Generate Colors

2

Add to Tailwind Config

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))", }
3

Add Styles

globals.css

@layer base {
    :root {
      --destructive: 10 62% 80%;
      --destructive-foreground: 10 62% 20%;
      --success: 138 62% 80%;
      --success-foreground: 138 62% 20%;
      --warning: 23 62% 80%;
      --warning-foreground: 23 62% 20%;
      --info: 195 62% 80%;
      --info-foreground: 195 62% 20%;
    }
  
    .dark {
      --destructive: 1 62% 9%;
      --destructive-foreground: 1 62% 69%;
      --success: 139 62% 9%;
      --success-foreground: 139 62% 49%;
      --warning: 38 62% 9%;
      --warning-foreground: 38 62% 49%;
      --info: 235 62% 9%;
      --info-foreground: 235 62% 89%;
    }
  }
4

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"