Live Theme Customization

Adjust CSS variables in real-time. Changes are instant - no page reload needed!

Light Dark

Theme Controls

Fine-tune CSS variables to see instant changes

Border Radius

0.5rem

Primary Color

Secondary Color

Accent Color

Destructive Color

Generated CSS

Copy this to your stylesheet

:root {
  --radius: 0.5rem;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
}

Live Preview

Real shadcn components responding to CSS variables

Buttons

Badges

Default Secondary Destructive Outline

Input

Alert

Heads up!

This alert uses theme colors and border radius.

Nested Card

Notice how the border radius changes!

More Components

Progress

Switch

Enabled

Checkbox

Checked

Keyboard

⌘ K

How It Works

Understanding the CSS variable theming system

1. CSS Variables in base.css

All theme values are defined as CSS custom properties in :root.

:root {
  --primary: 0 0% 9%;
  --radius: 0.5rem;
}

2. Tailwind Maps Variables

The tailwind-v4.css maps Tailwind classes to variables.

@theme {
  --color-primary: hsl(var(--primary));
  --radius-lg: var(--radius);
}

3. Override to Customize

Override variables in your CSS. Changes apply instantly!

/* Your custom theme */
:root {
  --primary: 221 83% 53%;
  --radius: 1rem;
}