Design your shadcn theme
Customize colors, spacing, and radii. Export ready-to-use CSS variables.
You can click on a color to adjust
background
210 20% 98%
foreground
210 10% 15%
primary
210 80% 45%
primary-foreground
0 0% 100%
secondary
210 15% 85%
secondary-foreground
0 0% 10%
accent
210 15% 85%
accent-foreground
210 10% 15%
card
210 20% 96%
card-foreground
210 10% 15%
popover
210 20% 98%
popover-foreground
210 10% 15%
muted
210 15% 90%
muted-foreground
210 8% 40%
destructive
0 85% 55%
destructive-foreground
0 0% 100%
border
210 15% 80%
input
210 15% 80%
ring
210 80% 45%
success
142 70% 40%
success-foreground
0 0% 100%
warning
38 90% 50%
warning-foreground
0 0% 10%
info
190 90% 45%
info-foreground
0 0% 100%
chart-1
210 80% 45%
chart-2
160 70% 45%
chart-3
40 85% 55%
chart-4
280 65% 50%
chart-5
320 75% 55%
sidebar
210 20% 96%
sidebar-foreground
210 10% 20%
sidebar-primary
210 80% 45%
sidebar-primary-foreground
0 0% 100%
sidebar-accent
210 15% 85%
sidebar-accent-foreground
210 10% 15%
sidebar-border
210 15% 80%
sidebar-ring
210 80% 45%