Theming & Customization

VibeUI uses CSS custom properties for all design tokens. Customize the entire look and feel by editing a single file.

Color Palette

All colors are defined as CSS custom properties in your globals.css file under the @theme block.

Background

--color-background

Foreground

--color-foreground

Accent Blue

--color-accent-blue

Accent Violet

--color-accent-violet

Charcoal

--color-brand-charcoal

Black

--color-brand-black

Gray

--color-brand-gray

Blue Glow

--color-accent-blue-glow

Customizing Colors

To customize the color scheme, simply override the variables in your globals.css:

css

@theme {
  /* Change the primary accent to teal */
  --color-accent-blue: #14b8a6;
  --color-accent-violet: #06b6d4;
  --color-accent-blue-glow: rgba(20, 184, 166, 0.5);

  /* Use a warmer background */
  --color-background: #0c0a09;
  --color-foreground: #fafaf9;
}

Typography

VibeUI uses Outfit as the display and body font, and Geist Mono for code. To change the font:

css

@theme {
  /* Replace with your preferred font */
  --font-display: "Inter", system-ui;
  --font-sans: "Inter", system-ui;
  --font-mono: "JetBrains Mono", monospace;
}

Glass & Utilities

VibeUI ships with glass-morphism utilities. Adjust transparency by modifying these tokens:

css

@theme {
  --color-glass: rgba(255, 255, 255, 0.03);
  --color-glass-strong: rgba(255, 255, 255, 0.08);
  --color-border-glass: rgba(255, 255, 255, 0.05);
}

/* Usage in Tailwind classes */
<div className="glass-card rounded-xl p-6">
  Glassmorphism card content
</div>