Add custom colors to shadcn/ui (success, warning, info)

shadcn/ui ships one semantic status color, destructive. Most apps also need success, warning and info. Because themes are plain CSS variables, adding your own tokens takes three short steps, and they behave exactly like the built-in ones, dark mode included.

Shortcut: every theme on this site can export matching status colors. On any theme page (or in the editor's Export dialog), switch on Include success, warning & info colors, or install the extended version with npx shadcn@latest add https://shadcnthemes.com/r/<theme>.extended.json.

1. Define the variables for both modes

Add a surface and a foreground for each new token in :root and .dark:

:root {
  --success: oklch(0.6 0.15 150);
  --success-foreground: oklch(0.985 0.02 150);
  --warning: oklch(0.8 0.16 80);
  --warning-foreground: oklch(0.25 0.06 70);
  --info: oklch(0.6 0.15 245);
  --info-foreground: oklch(0.985 0.015 245);
}

.dark {
  --success: oklch(0.7 0.15 150);
  --success-foreground: oklch(0.2 0.05 150);
  --warning: oklch(0.82 0.15 80);
  --warning-foreground: oklch(0.22 0.05 70);
  --info: oklch(0.7 0.13 245);
  --info-foreground: oklch(0.18 0.04 245);
}

Yellow and amber are light colors, so warning almost always needs a dark foreground in both modes. Check each pair reaches at least 4.5:1 contrast.

2. Map them to Tailwind utilities

@theme inline {
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
}

Now bg-success, text-warning-foreground, border-info, bg-success/10 and every other color utility work.

3. Use them in components

Add variants to the components you own. For example, the badge:

const badgeVariants = cva("…base classes…", {
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground",
      secondary: "bg-secondary text-secondary-foreground",
      destructive: "bg-destructive text-white",
      outline: "text-foreground",
      success: "bg-success text-success-foreground",
      warning: "bg-warning text-warning-foreground",
      info: "bg-info text-info-foreground",
    },
  },
})

For softer alerts, combine a tinted background with colored text: bg-success/10 text-success border-success/30.

Tips for picking the colors

Match your theme's lightness. Give status colors roughly the same OKLCH lightness as your primary so nothing looks out of place.
Keep hues recognizable. Success around 145–155, warning around 70–90, info around 230–250. Users read these by convention.
Tint toward your neutrals with a little chroma, the same way the rest of your theme does.

Pick a theme in the gallery, open it in the editor to get its exact lightness values, then add your status colors alongside.

Open the theme editor

Edit every token in light and dark, check contrast, and export Tailwind v4 CSS.

1. Define the variables for both modes

2. Map them to Tailwind utilities

3. Use them in components

Tips for picking the colors

More guides