Over 10000 Themes for shadcn/ui available.
Explore themesGet a MVP of your project idea within 2 weeks. Guaranteed.
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))",
}
globals.css
@layer base {
:root {
--destructive: 13 50% 61%;
--destructive-foreground: 13 50% 1%;
--success: 158 50% 61%;
--success-foreground: 158 50% 1%;
--warning: 50 50% 61%;
--warning-foreground: 50 50% 1%;
--info: 223 50% 61%;
--info-foreground: 0 0% 0%;
}
.dark {
--destructive: 3 50% 15%;
--destructive-foreground: 3 50% 75%;
--success: 114 50% 15%;
--success-foreground: 114 50% 75%;
--warning: 35 50% 15%;
--warning-foreground: 35 50% 75%;
--info: 217 50% 15%;
--info-foreground: 217 50% 75%;
}
}
Add new variants to your components.