Theme export

Copy or download the current global theme CSS.

Select a preview theme and export a production-ready `global.css` where that theme is merged into `:root`. Other preview themes are removed from the output.

Export global.css

Export one selected theme as a standalone `global.css`. The output maps the selected theme to `:root` and removes the other preview themes.

Preset export6,490 bytes

Theme token JSON

3,872 bytes · uses preset styles

Export package

Download implementation notes alongside CSS and tokens.

global.css

Production CSS variables for the selected theme.

theme.json

Light and dark token source for preset persistence.

README.md

Package overview for handoff or sale.

shadcn-install.md

Implementation notes for shadcn/ui projects.

nextjs-usage.md

Implementation notes for Next.js starter projects.

Quality Gate

Export readiness based on contrast, token completeness, and scenario coverage.

Ready

Theme score

96/100

Contrast pass rate

93%

13/14

Missing tokens

complete

Scenario coverage

5/5

landing, pricing, dashboard, auth, settings

/* Generated by theme-components-preview. */

/* Source theme: Utility Neutral (theme-utility) */

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-ui);
  --font-mono: var(--font-code);
  --font-heading: var(--font-heading);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  /* Exported theme: Utility Neutral / light */
  --background: oklch(0.99 0.006 95);
  --foreground: oklch(0.19 0.02 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.02 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.19 0.02 250);
  --primary: oklch(0.52 0.16 190);
  --primary-foreground: oklch(0.98 0.01 95);
  --secondary: oklch(0.95 0.03 95);
  --secondary-foreground: oklch(0.22 0.03 250);
  --muted: oklch(0.95 0.02 95);
  --muted-foreground: oklch(0.48 0.03 250);
  --accent: oklch(0.91 0.07 160);
  --accent-foreground: oklch(0.2 0.04 190);
  --destructive: oklch(0.58 0.22 25);
  --border: oklch(0.88 0.02 95);
  --input: oklch(0.88 0.02 95);
  --ring: oklch(0.52 0.16 190);
  --chart-1: oklch(0.72 0.14 190);
  --chart-2: oklch(0.62 0.1 155);
  --chart-3: oklch(0.68 0.12 85);
  --chart-4: oklch(0.56 0.12 250);
  --chart-5: oklch(0.58 0.16 25);
  --radius: 0.5rem;
  --sidebar: oklch(0.98 0.01 95);
  --sidebar-foreground: oklch(0.19 0.02 250);
  --sidebar-primary: oklch(0.52 0.16 190);
  --sidebar-primary-foreground: oklch(0.98 0.01 95);
  --sidebar-accent: oklch(0.95 0.03 95);
  --sidebar-accent-foreground: oklch(0.22 0.03 250);
  --sidebar-border: oklch(0.88 0.02 95);
  --sidebar-ring: oklch(0.52 0.16 190);
  --font-ui: var(--font-inter), Arial, Helvetica, sans-serif;
  --font-heading: var(--font-inter), Arial, Helvetica, sans-serif;
  --font-code: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace;
  --font-number: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace;
  --type-heading-weight: 650;
  --type-body-leading: 1.5;
  --type-label-transform: none;
  --type-label-weight: 500;
}

.dark {
  /* Exported theme: Utility Neutral / dark */
  --background: oklch(0.15 0.02 250);
  --foreground: oklch(0.96 0.01 95);
  --card: oklch(0.2 0.025 250);
  --card-foreground: oklch(0.96 0.01 95);
  --popover: oklch(0.2 0.025 250);
  --popover-foreground: oklch(0.96 0.01 95);
  --primary: oklch(0.74 0.14 180);
  --primary-foreground: oklch(0.13 0.02 250);
  --secondary: oklch(0.26 0.03 250);
  --secondary-foreground: oklch(0.96 0.01 95);
  --muted: oklch(0.25 0.025 250);
  --muted-foreground: oklch(0.72 0.02 95);
  --accent: oklch(0.32 0.08 165);
  --accent-foreground: oklch(0.96 0.01 95);
  --destructive: oklch(0.7 0.19 25);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 16%);
  --ring: oklch(0.74 0.14 180);
  --chart-1: oklch(0.74 0.14 180);
  --chart-2: oklch(0.68 0.14 145);
  --chart-3: oklch(0.76 0.12 85);
  --chart-4: oklch(0.66 0.12 255);
  --chart-5: oklch(0.7 0.18 25);
  --radius: 0.5rem;
  --sidebar: oklch(0.18 0.025 250);
  --sidebar-foreground: oklch(0.96 0.01 95);
  --sidebar-primary: oklch(0.74 0.14 180);
  --sidebar-primary-foreground: oklch(0.13 0.02 250);
  --sidebar-accent: oklch(0.26 0.03 250);
  --sidebar-accent-foreground: oklch(0.96 0.01 95);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.74 0.14 180);
  --font-ui: var(--font-inter), Arial, Helvetica, sans-serif;
  --font-heading: var(--font-inter), Arial, Helvetica, sans-serif;
  --font-code: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace;
  --font-number: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace;
  --type-heading-weight: 650;
  --type-body-leading: 1.5;
  --type-label-transform: none;
  --type-label-weight: 500;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-ui);
    line-height: var(--type-body-leading);
  }
  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  html {
    @apply font-sans;
  }
  h1,
  h2,
  h3,
  [data-typography="heading"] {
    font-family: var(--font-heading);
    font-weight: var(--type-heading-weight);
    letter-spacing: 0;
  }
  code,
  kbd,
  pre,
  [data-typography="code"] {
    font-family: var(--font-code);
  }
}

@layer components {
  .preview-grid {
    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-3;
  }

  .tool-surface {
    @apply rounded-xl border bg-card text-card-foreground shadow-sm;
  }

  .type-label {
    font-weight: var(--type-label-weight);
    letter-spacing: 0;
    text-transform: var(--type-label-transform);
  }

  .type-number {
    font-family: var(--font-number);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  .type-code-sample {
    font-family: var(--font-code);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
}

CLI export

Generate a physical CSS file from the same source.

pnpm export:theme theme-studio

The command writes `exports/global.css` for the requested theme. Use `theme-utility`, `theme-studio`, or `theme-console`.

The exported CSS has no `.theme-utility`, `.theme-studio`, or `.theme-console` blocks. The selected theme is already mapped to `:root`.