Theme Builder

Customize design tokens and export a global.css snippet to drop into your project. Changes are previewed live on this page.

Token☀️ Light🌙 Dark

Base

--bambi-background
--bambi-foreground

Surface

--bambi-card
--bambi-card-foreground
--bambi-popover
--bambi-popover-foreground

Brand

--bambi-primary
--bambi-primary-foreground
--bambi-secondary
--bambi-secondary-foreground
--bambi-accent
--bambi-accent-foreground

State

--bambi-muted
--bambi-muted-foreground
--bambi-destructive
--bambi-destructive-foreground

Utility

--bambi-border
--bambi-input
--bambi-ring

Border Radius

SM
MD
LG
XL

Typography

Sans
Mono

Live Preview

☀️ Light

Card Title →

Muted description text.

Foreground. code muted.

🌙 Dark

Card Title →

Muted description text.

Foreground. code muted.

Export CSS

/* @bambi-ui/theme custom theme — paste into your global.css */
:root {
  --bambi-background: #ffffff;
  --bambi-foreground: #171717;
  --bambi-card: #ffffff;
  --bambi-card-foreground: #171717;
  --bambi-popover: #ffffff;
  --bambi-popover-foreground: #171717;
  --bambi-primary: #3b72e8;
  --bambi-primary-foreground: #fafafa;
  --bambi-secondary: #f5f5f5;
  --bambi-secondary-foreground: #171717;
  --bambi-accent: #ebebeb;
  --bambi-accent-foreground: #171717;
  --bambi-muted: #ebebeb;
  --bambi-muted-foreground: #737373;
  --bambi-destructive: #dc2626;
  --bambi-destructive-foreground: #fafafa;
  --bambi-border: #e5e5e5;
  --bambi-input: #e5e5e5;
  --bambi-ring: #3b72e8;
  --bambi-radius-sm: 0.25rem;
  --bambi-radius-md: 0.375rem;
  --bambi-radius-lg: 0.5rem;
  --bambi-radius-xl: 0.75rem;
  --bambi-font-sans: system-ui, sans-serif;
  --bambi-font-mono: ui-monospace, monospace;
}

.dark {
  --bambi-background: #171717;
  --bambi-foreground: #fafafa;
  --bambi-card: #1e1e1e;
  --bambi-card-foreground: #fafafa;
  --bambi-popover: #1e1e1e;
  --bambi-popover-foreground: #fafafa;
  --bambi-primary: #5b8cf7;
  --bambi-primary-foreground: #171717;
  --bambi-secondary: #262626;
  --bambi-secondary-foreground: #fafafa;
  --bambi-accent: #2e2e2e;
  --bambi-accent-foreground: #fafafa;
  --bambi-muted: #262626;
  --bambi-muted-foreground: #a3a3a3;
  --bambi-destructive: #ef4444;
  --bambi-destructive-foreground: #fafafa;
  --bambi-border: #404040;
  --bambi-input: #404040;
  --bambi-ring: #5b8cf7;
}