Theme configurator

Sections read your design tokens, so branding is one paste away. Pick a color, preview live, copy the CSS.

Brand color

Custom…#7c3aed

Radius

Preview theme

Your tokens

:root {
  --primary: #7c3aed;
  --primary-foreground: oklch(0.985 0 0);
  --ring: #7c3aed;
  --radius: 0.625rem;
}

.dark {
  --primary: #7c3aed;
  --primary-foreground: oklch(0.985 0 0);
  --ring: #7c3aed;
}

Paste into your globals.css — every installed section follows instantly.