Velora UI
Star on GitHub
Themes

Rebrand in seven variables

Velora components never hardcode a color — they read your brand ramp from CSS tokens. Pick a preset, watch every effect follow, then copy the block into globals.css.

Every effect follows your ramp

Aurora, gradient text, beams and buttons — all reading the same seven variables. This panel updates live as you switch presets.

Border beam

Even the traveling beam samples the ramp.

Copy the Velora Blue tokens

:root {
  --primary: oklch(0.546 0.245 263);
  --primary-foreground: oklch(0.985 0 0);
  --brand: oklch(0.546 0.245 263);
  --brand-foreground: oklch(0.985 0 0);
  --brand-from: oklch(0.546 0.245 263);
  --brand-via: oklch(0.623 0.214 260);
  --brand-to: oklch(0.685 0.169 237);
}

.dark {
  --primary: oklch(0.623 0.214 260);
  --primary-foreground: oklch(0.985 0 0);
  --brand: oklch(0.623 0.214 260);
  --brand-foreground: oklch(0.985 0 0);
  --brand-from: oklch(0.623 0.214 260);
  --brand-via: oklch(0.707 0.165 255);
  --brand-to: oklch(0.746 0.16 233);
}

Paste the block into your globals.css after the default tokens — that's the whole rebrand.