shadcn/ui Theme Export

Export ChromUI themes as shadcn/ui-compatible CSS. Ready-to-use CSS variables that work with shadcn/ui components. Includes colors, typography, and spacing tokens.

Output Format

The shadcn/ui export generates CSS variables that match shadcn/ui's naming conventions. Color tokens include `--background`, `--foreground`, `--primary`, `--primary-foreground`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`, etc.

Typography tokens use shadcn/ui's font variable names. Spacing and other tokens follow shadcn/ui's conventions. The export is ready to use with shadcn/ui components without modification.

How to Apply

Copy the generated CSS and add it to your global stylesheet (usually `app/globals.css` in Next.js). Replace the existing `:root` block or merge the variables. shadcn/ui components will automatically use the new theme values.

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 142.1 76.2% 36.3%;
    --radius: 0.5rem;
  }
}