Theming

Swap themes, override colors, or build your own — without modifying component files.

All visual customization runs through CSS variables. Three built-in themes are included: Default, Minimal, and Rounded — each with light and dark mode support.

Install a theme

Install a complete theme with a single command. Each theme includes the full color palette for both light and dark modes.

# Install the default theme (includes colors)
npx shadcn@latest add "http://localhost:3000/r/themes/theme-default.json"

# Or choose a different theme:
npx shadcn@latest add "http://localhost:3000/r/themes/theme-minimal.json"
npx shadcn@latest add "http://localhost:3000/r/themes/theme-rounded.json"

Default Theme

Sophisticated shadows and depth with warm carbon tones

CSS Variables

Copy and paste the following code into your CSS file.

Base Theme Variables

@theme inline {
  --color-page: var(--color-page);
  --color-background: var(--color-background);
  --color-foreground: var(--color-foreground);

  --color-card: var(--color-card);
  --color-card-foreground: var(--color-card-foreground);

  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-foreground);

  --color-secondary: var(--color-secondary);
  --color-secondary-foreground: var(--color-secondary-foreground);

  --color-accent: var(--color-accent);
  --color-accent-foreground: var(--color-accent-foreground);

  --color-muted: var(--color-muted);
  --color-muted-foreground: var(--color-muted-foreground);

  --color-border: var(--color-border);

  --color-ring: oklch(from var(--color-ring) l c h / 50%);;

  --color-info: var(--color-info);
  --color-info-foreground: var(--color-info-foreground);
  --color-success: var(--color-success);
  --color-success-foreground: var(--color-success-foreground);
  --color-warning: var(--color-warning);
  --color-warning-foreground: var(--color-warning-foreground);

  --color-destructive: var(--color-destructive);
  --color-destructive-foreground: var(--color-destructive-foreground);
  --color-destructive-border: var(--color-destructive-border);

  --color-popover: var(--color-popover);
  --color-popover-foreground: var(--color-popover-foreground);

  --color-input: var(--color-input);
  --color-input-foreground: var(--color-input-foreground);
  --color-input-muted: var(--color-input-muted);

  --shadow-bevel-xs: var(--shadow-bevel-xs);
  --shadow-bevel-sm: var(--shadow-bevel-sm);
  --shadow-bevel-md: var(--shadow-bevel-md);
  --shadow-bevel-lg: var(--shadow-bevel-md);
  --shadow-bevel-xl: var(--shadow-bevel-xl);
  --shadow-bevel-2xl: var(--shadow-bevel-2xl);

  --shadow-button-resting: var(--shadow-button-resting);
  --shadow-button-hover: var(--shadow-button-hover);
  --shadow-button-focus: var(--shadow-button-hover);

  --shadow-button-destructive-resting: var(--shadow-button-destructive-resting);
  --shadow-button-destructive-hover: var(--shadow-button-destructive-hover);
  --shadow-button-destructive-focus: var(--shadow-button-destructive-focus);

  --shadow-button-outlined-resting: var(--shadow-button-outlined-resting);
  --shadow-button-outlined-hover: var(--shadow-button-outlined-resting);
  --shadow-button-outlined-focus: var(--shadow-button-outlined-resting);

  --shadow-input-resting: var(--shadow-input-resting);
  --shadow-input-hover: var(--shadow-input-hover);
  --shadow-input-focus: var(--shadow-input-focus);
  --shadow-input-destructive-resting: var(--shadow-input-destructive-resting);
  --shadow-input-destructive-hover: var(--shadow-input-destructive-hover);
  --shadow-input-destructive-focus: var(--shadow-input-destructive-focus);

  --shadow-checkbox-resting: var(--shadow-checkbox-resting);
  --shadow-checkbox-hover: var(--shadow-checkbox-hover);

  --shadow-switch-resting: var(--shadow-switch-resting);
  --shadow-switch-hover: var(--shadow-switch-resting);
  --shadow-switch-focus: var(--shadow-switch-focus);
  --shadow-switch-thumb: var(--shadow-switch-thumb);

  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-2xl: var(--radius-2xl);
  --radius-3xl: var(--radius-3xl);
  --radius-4xl: var(--radius-4xl);
  --radius-5xl: var(--radius-5xl);
  --radius-6xl: var(--radius-6xl);
  --radius-7xl: var(--radius-7xl);
  --radius-8xl: var(--radius-8xl);
  --radius-9xl: var(--radius-9xl);
}

Light Mode

:root {
  --color-page: oklch(98.21% 0 0);
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(23.93% 0 0);
  --color-card: oklch(100% 0 0);
  --color-card-foreground: oklch(0% 0 0);
  --color-popover: oklch(100% 0 0);
  --color-popover-foreground: oklch(23.93% 0 0);
  --color-primary: oklch(26.1% 0.0079 84.59);
  --color-primary-foreground: oklch(100% 0 0);
  --color-secondary: oklch(95.51% 0 0);
  --color-secondary-foreground: oklch(99.11% 0 0);
  --color-muted: oklch(95.51% 0 0);
  --color-muted-foreground: oklch(60.66% 0 0);
  --color-accent: oklch(64.01% 0 0);
  --color-accent-foreground: oklch(23.93% 0 0);
  --color-destructive: oklch(92.39% 0.0391 31.56);
  --color-destructive-foreground: oklch(56.26% 0.1824 30.09);
  --color-border: oklch(88.53% 0 0);
  --color-input: oklch(100% 0 0);
  --color-ring: oklch(85.14% 0 0 / 50%);

  /* Bevel Shadows */
  --shadow-bevel-xs: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
  --shadow-bevel-sm: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 4px 4px -2px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
  --shadow-bevel-md: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 6px 6px -3px oklch(0% 0 0 / 5%), 0px 4px 4px -1px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
  --shadow-bevel-lg: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 12px 12px -6px oklch(0% 0 0 / 10%), 0px 6px 6px -1.5px oklch(0% 0 0 / 5%), 0px 4px 4px 0px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
  --shadow-bevel-xl: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 24px 24px -22px oklch(0% 0 0 / 10%), 0px 12px 12px -8px oklch(0% 0 0 / 10%), 0px 6px 6px -3px oklch(0% 0 0 / 5%), 0px 4px 4px 2px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
  --shadow-bevel-2xl: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 40px 40px -28px oklch(0% 0 0 / 10%), 0px 24px 24px -28px oklch(0% 0 0 / 10%), 0px 12px 12px -8px oklch(0% 0 0 / 10%), 0px 6px 6px -3px oklch(0% 0 0 / 5%), 0px 4px 4px 2px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);

  /* Button Shadows */
  --shadow-button-resting: 0px 0px 0px 1px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 10%), 0px 1px 1px -0.5px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0px 4px 8px -2px oklch(0% 0 0 / 10%), 0px 8px 12px -8px oklch(0% 0 0 / 10%), inset 0px -2px 2px -1px oklch(0% 0 0 / 50%), inset 0px 2px 2px -1px oklch(100% 0 0 / 20%);
  --shadow-button-hover: 0px 0px 0px 1px oklch(0% 0 0 / 15%), 0px 2px 2px -1px oklch(0% 0 0 / 10%), 0px 1px 1px -0.5px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0px 4px 8px -2px oklch(0% 0 0 / 10%), 0px 8px 12px -8px oklch(0% 0 0 / 10%), inset 0px -2px 2px -1px oklch(0% 0 0 / 50%), inset 0px 2px 2px -1px oklch(100% 0 0 / 20%);
  --shadow-button-destructive-resting: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 5%), 0px 2px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 4px 8px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 8px 12px -8px oklch(51.17% 0.1823 30.25 / 10%), inset 0px -2px 2px -1px oklch(51.17% 0.1823 30.25 / 20%), inset 0px 4px 2px -2px oklch(100% 0 0 / 15%);
  --shadow-button-destructive-hover: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 15%), 0px 2px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 4px 8px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 8px 12px -8px oklch(51.17% 0.1823 30.25 / 10%), inset 0px -2px 2px -1px oklch(51.17% 0.1823 30.25 / 20%), inset 0px 4px 2px -2px oklch(100% 0 0 / 15%);
  --shadow-button-outlined-resting: 0px 0px 0px 1px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 10%), 0px 1px 1px -0.5px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0px 4px 8px -2px oklch(0% 0 0 / 10%), inset 0px -2px 2px -1px oklch(0% 0 0 / 20%), inset 0px 4px 2px -2px oklch(100% 0 0 / 15%);
  --shadow-button-outlined-hover: 0px 0px 0px 1px oklch(0% 0 0 / 15%), 0px 2px 2px -1px oklch(0% 0 0 / 10%), 0px 1px 1px -0.5px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0px 4px 8px -2px oklch(0% 0 0 / 10%), inset 0px -2px 2px -1px oklch(0% 0 0 / 20%), inset 0px 4px 2px -2px oklch(100% 0 0 / 15%);

  /* Input Shadows */
  --shadow-input-resting: 0 0 0 1px oklch(0% 0 0 / 10%), 0px 0.5px 0px -0.5px oklch(0% 0 0 / 10%), 0 1px 0 -1px oklch(0% 0 0 / 10%), 0px 1px 1px -1px oklch(0% 0 0 / 10%), 0px 1px 2px -1px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0 4px 6px -8px oklch(0% 0 0 / 10%), 0 6px 6px -12px oklch(0% 0 0 / 10%);
  --shadow-input-hover: 0px 0px 0px 1px oklch(0% 0 0 / 20%), 0px 0.5px 0px -0.5px oklch(0% 0 0 / 10%), 0 1px 0 -1px oklch(0% 0 0 / 10%), 0px 1px 1px -1px oklch(0% 0 0 / 10%), 0px 1px 2px -1px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0 4px 6px -8px oklch(0% 0 0 / 10%), 0 6px 6px -12px oklch(0% 0 0 / 10%);
  --shadow-input-destructive-resting: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 15%), 0px 0.5px 0px -0.5px oklch(51.17% 0.1823 30.25 / 50%), 0 1px 0 -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0 4px 6px -8px oklch(51.17% 0.1823 30.25 / 10%);
  --shadow-input-destructive-hover: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 25%), 0px 0.5px 0px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0 1px 0 -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0 4px 6px -8px oklch(51.17% 0.1823 30.25 / 10%);
  --shadow-input-destructive-focus: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 25%), 0px 0.5px 0px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0 1px 0 -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0 4px 6px -8px oklch(51.17% 0.1823 30.25 / 10%);

  /* Checkbox Shadows */
  --shadow-checkbox-resting: 0px 0.5px 0px -0.5px oklch(0% 0 0 / 10%), 0 1px 0 -1px oklch(0% 0 0 / 10%), 0px 1px 1px -1px oklch(0% 0 0 / 10%), 0px 1px 2px -1px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0 4px 6px -8px oklch(0% 0 0 / 10%), inset 0px -1px 2px -1px oklch(0% 0 0 / 20%), inset 0px 2px 1px -1px oklch(100% 0 0 / 50%);
  --shadow-checkbox-hover: 0px 0.5px 0px -0.5px oklch(0% 0 0 / 10%), 0 1px 0 -1px oklch(0% 0 0 / 10%), 0px 1px 1px -1px oklch(0% 0 0 / 10%), 0px 1px 2px -1px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), 0 4px 6px -8px oklch(0% 0 0 / 10%), 0 8px 12px -8px oklch(0% 0 0 / 10%), inset 0px -1px 2px -1px oklch(0% 0 0 / 20%), inset 0px 2px 1px -1px oklch(100% 0 0 / 50%);

  /* Switch Shadows */
  --shadow-switch-resting: 0 0 0 1px oklch(0% 0 0 / 5%), inset 0px 0.5px 1px 0.5px oklch(0% 0 0 / 10%);
  --shadow-switch-hover: 0px 0px 0px 1px oklch(0% 0 0 / 10%), inset 0px 1px 1px 0.5px oklch(0% 0 0 / 10%);
  --shadow-switch-focus: 0px 0px 0px 1px oklch(0% 0 0 / 10%), 0px 0px 0px 1px oklch(0% 0 0 / 10%), inset 0px 1px 1px 0.5px oklch(0% 0 0 / 10%);
  --shadow-switch-thumb: 0px 0.5px 0px -0.5px oklch(0% 0 0 / 10%), 0 1px 0 -1px oklch(0% 0 0 / 10%), 0px 2px 2px -1px oklch(0% 0 0 / 10%), 0px 2px 4px -2px oklch(0% 0 0 / 10%), inset 0 -2px 4px -2px oklch(100% 0 0), inset 0px 0.5px 0.5px oklch(100% 0 0 / 10%);
}

Dark Mode

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: oklch(21.34% 0 0);
    --color-background: oklch(0% 0 0);
    --color-foreground: oklch(94.91% 0 0);
    --color-card: oklch(0% 0 0);
    --color-card-foreground: oklch(100% 0 0);
    --color-popover: oklch(0% 0 0);
    --color-popover-foreground: oklch(94.91% 0 0);
    --color-primary: oklch(94.65% 0.0058 84.57);
    --color-primary-foreground: oklch(0% 0 0);
    --color-secondary: oklch(25.2% 0 0);
    --color-secondary-foreground: oklch(17.76% 0 0);
    --color-muted: oklch(25.2% 0 0);
    --color-muted-foreground: oklch(58.29% 0 0);
    --color-accent: oklch(53.82% 0 0);
    --color-accent-foreground: oklch(94.91% 0 0);
    --color-destructive: oklch(35.39% 0.0591 31.56);
    --color-destructive-foreground: oklch(79.26% 0.1824 30.09);
    --color-border: oklch(34.85% 0 0);
    --color-input: oklch(0% 0 0);
    --color-ring: oklch(40.17% 0 0 / 50%);

    /* Bevel Shadows */
    --shadow-bevel-xs: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
    --shadow-bevel-sm: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 4px 4px -2px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
    --shadow-bevel-md: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 6px 6px -3px oklch(0% 0 0 / 5%), 0px 4px 4px -1px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
    --shadow-bevel-lg: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 12px 12px -6px oklch(0% 0 0 / 10%), 0px 6px 6px -1.5px oklch(0% 0 0 / 5%), 0px 4px 4px 0px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
    --shadow-bevel-xl: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 24px 24px -22px oklch(0% 0 0 / 10%), 0px 12px 12px -8px oklch(0% 0 0 / 10%), 0px 6px 6px -3px oklch(0% 0 0 / 5%), 0px 4px 4px 2px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);
    --shadow-bevel-2xl: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 40px 40px -28px oklch(0% 0 0 / 10%), 0px 24px 24px -28px oklch(0% 0 0 / 10%), 0px 12px 12px -8px oklch(0% 0 0 / 10%), 0px 6px 6px -3px oklch(0% 0 0 / 5%), 0px 4px 4px 2px oklch(0% 0 0 / 5%), 0px 2px 2px -1px oklch(0% 0 0 / 5%), 0px 1px 1px -0.5px oklch(0% 0 0 / 5%), inset 0px -1.5px 1.5px -1.5px oklch(0% 0 0 / 5%), inset 0px 3px 3px -1.5px oklch(100% 0 0 / 10%);

    /* Button Shadows */
    --shadow-button-resting: 0px 0px 0px 1px oklch(100% 0 0 / 5%), 0px 2px 2px -1px oklch(100% 0 0 / 10%), 0px 1px 1px -0.5px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0px 4px 8px -2px oklch(100% 0 0 / 10%), 0px 8px 12px -8px oklch(100% 0 0 / 10%), inset 0px -2px 2px -1px oklch(100% 0 0 / 50%), inset 0px 2px 2px -1px oklch(0% 0 0 / 20%);
    --shadow-button-hover: 0px 0px 0px 1px oklch(100% 0 0 / 15%), 0px 2px 2px -1px oklch(100% 0 0 / 10%), 0px 1px 1px -0.5px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0px 4px 8px -2px oklch(100% 0 0 / 10%), 0px 8px 12px -8px oklch(100% 0 0 / 10%), inset 0px -2px 2px -1px oklch(100% 0 0 / 50%), inset 0px 2px 2px -1px oklch(0% 0 0 / 20%);
    --shadow-button-destructive-resting: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 5%), 0px 2px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 4px 8px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 8px 12px -8px oklch(51.17% 0.1823 30.25 / 10%), inset 0px -2px 2px -1px oklch(51.17% 0.1823 30.25 / 20%), inset 0px 4px 2px -2px oklch(0% 0 0 / 15%);
    --shadow-button-destructive-hover: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 15%), 0px 2px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 4px 8px -2px oklch(51.17% 0.1823 30.25 / 10%), 0px 8px 12px -8px oklch(51.17% 0.1823 30.25 / 10%), inset 0px -2px 2px -1px oklch(51.17% 0.1823 30.25 / 20%), inset 0px 4px 2px -2px oklch(0% 0 0 / 15%);
    --shadow-button-outlined-resting: 0px 0px 0px 1px oklch(100% 0 0 / 5%), 0px 2px 2px -1px oklch(100% 0 0 / 10%), 0px 1px 1px -0.5px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0px 4px 8px -2px oklch(100% 0 0 / 10%), inset 0px -2px 2px -1px oklch(100% 0 0 / 20%), inset 0px 4px 2px -2px oklch(0% 0 0 / 15%);
    --shadow-button-outlined-hover: 0px 0px 0px 1px oklch(100% 0 0 / 15%), 0px 2px 2px -1px oklch(100% 0 0 / 10%), 0px 1px 1px -0.5px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0px 4px 8px -2px oklch(100% 0 0 / 10%), inset 0px -2px 2px -1px oklch(100% 0 0 / 20%), inset 0px 4px 2px -2px oklch(0% 0 0 / 15%);

    /* Input Shadows */
    --shadow-input-resting: 0 0 0 1px oklch(100% 0 0 / 10%), 0px 0.5px 0px -0.5px oklch(100% 0 0 / 10%), 0 1px 0 -1px oklch(100% 0 0 / 10%), 0px 1px 1px -1px oklch(100% 0 0 / 10%), 0px 1px 2px -1px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0 4px 6px -8px oklch(100% 0 0 / 10%), 0 6px 6px -12px oklch(100% 0 0 / 10%);
    --shadow-input-hover: 0px 0px 0px 1px oklch(100% 0 0 / 20%), 0px 0.5px 0px -0.5px oklch(100% 0 0 / 10%), 0 1px 0 -1px oklch(100% 0 0 / 10%), 0px 1px 1px -1px oklch(100% 0 0 / 10%), 0px 1px 2px -1px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0 4px 6px -8px oklch(100% 0 0 / 10%), 0 6px 6px -12px oklch(100% 0 0 / 10%);
    --shadow-input-destructive-resting: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 15%), 0px 0.5px 0px -0.5px oklch(51.17% 0.1823 30.25 / 50%), 0 1px 0 -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0 4px 6px -8px oklch(51.17% 0.1823 30.25 / 10%);
    --shadow-input-destructive-hover: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 25%), 0px 0.5px 0px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0 1px 0 -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0 4px 6px -8px oklch(51.17% 0.1823 30.25 / 10%);
    --shadow-input-destructive-focus: 0px 0px 0px 1px oklch(51.17% 0.1823 30.25 / 25%), 0px 0.5px 0px -0.5px oklch(51.17% 0.1823 30.25 / 10%), 0 1px 0 -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 1px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 1px 2px -1px oklch(51.17% 0.1823 30.25 / 10%), 0px 2px 4px -2px oklch(51.17% 0.1823 30.25 / 10%), 0 4px 6px -8px oklch(51.17% 0.1823 30.25 / 10%);

    /* Checkbox Shadows */
    --shadow-checkbox-resting: 0px 0.5px 0px -0.5px oklch(100% 0 0 / 10%), 0 1px 0 -1px oklch(100% 0 0 / 10%), 0px 1px 1px -1px oklch(100% 0 0 / 10%), 0px 1px 2px -1px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0 4px 6px -8px oklch(100% 0 0 / 10%), inset 0px -1px 2px -1px oklch(100% 0 0 / 20%), inset 0px 2px 1px -1px oklch(0% 0 0 / 50%);
    --shadow-checkbox-hover: 0px 0.5px 0px -0.5px oklch(100% 0 0 / 10%), 0 1px 0 -1px oklch(100% 0 0 / 10%), 0px 1px 1px -1px oklch(100% 0 0 / 10%), 0px 1px 2px -1px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), 0 4px 6px -8px oklch(100% 0 0 / 10%), 0 8px 12px -8px oklch(100% 0 0 / 10%), inset 0px -1px 2px -1px oklch(100% 0 0 / 20%), inset 0px 2px 1px -1px oklch(0% 0 0 / 50%);

    /* Switch Shadows */
    --shadow-switch-resting: 0 0 0 1px oklch(100% 0 0 / 5%), inset 0px 0.5px 1px 0.5px oklch(100% 0 0 / 10%);
    --shadow-switch-hover: 0px 0px 0px 1px oklch(100% 0 0 / 10%), inset 0px 1px 1px 0.5px oklch(100% 0 0 / 10%);
    --shadow-switch-focus: 0px 0px 0px 1px oklch(100% 0 0 / 10%), 0px 0px 0px 1px oklch(100% 0 0 / 10%), inset 0px 1px 1px 0.5px oklch(100% 0 0 / 10%);
    --shadow-switch-thumb: 0px 0.5px 0px -0.5px oklch(100% 0 0 / 10%), 0 1px 0 -1px oklch(100% 0 0 / 10%), 0px 2px 2px -1px oklch(100% 0 0 / 10%), 0px 2px 4px -2px oklch(100% 0 0 / 10%), inset 0 -2px 4px -2px oklch(0% 0 0), inset 0px 0.5px 0.5px oklch(0% 0 0 / 10%);
  }
}

Override variables

Override specific variables to customize appearance while keeping the rest of the theme intact.

/* Override specific variables */
[data-theme="default"] {
  --color-primary: oklch(45.2% 0.1334 269.49); /* Custom blue */
  --color-primary-foreground: oklch(100% 0 0);

  /* Adjust border radius */
  --radius: 8px;
}

Variable reference

Semantic CSS variables available across all themes:

Background & Foreground

--color-background
--color-foreground
--color-card
--color-card-foreground
--color-popover
--color-popover-foreground

Interactive Elements

--color-primary
--color-primary-foreground
--color-secondary
--color-secondary-foreground
--color-accent
--color-accent-foreground

States & Feedback

--color-destructive
--color-destructive-foreground
--color-muted
--color-muted-foreground

Borders & Layout

--color-border
--color-input
--color-ring
--radius