Theme

Theme Studio

Tune the docs palette, then copy a Tailwind v4 @theme block into src/tailwind.css. Changes apply live across this site.

  1. Pick a palette. Choose a curated preset (Supabase, Linear, Tokyo Night, Nord, Catppuccin, Vercel) or drag the primary hue.
  2. Tune tokens. Set radius, font, border contrast, density, and background.
  3. Copy @theme. Copy the generated Tailwind v4 @theme block.
  4. Paste into the app. Paste the block into src/tailwind.css. color="primary" keeps using blue-* tokens.

Curated presets

More palettes

Primary hue

Using the selected preset

Radius

Font

Border contrast

Density

Background

Live preview

Badge
Brand color, radius, and contrast update immediately.

Tailwind v4 @theme

Paste into src/tailwind.css. See Getting started for the rest of the Tailwind setup.

css

/* Paste into src/tailwind.css */
@import "tailwindcss";

@source "./src/**/*.{html,ts}";

@theme {
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --radius-lg: 0.5rem;
  --radius-md: calc(var(--radius-lg) - 2px);
  --radius-sm: calc(var(--radius-lg) - 4px);
  --color-blue-50: rgb(239 246 255);
  --color-blue-100: rgb(219 234 254);
  --color-blue-200: rgb(191 219 254);
  --color-blue-300: rgb(147 197 253);
  --color-blue-400: rgb(96 165 250);
  --color-blue-500: rgb(59 130 246);
  --color-blue-600: rgb(37 99 235);
  --color-blue-700: rgb(29 78 216);
  --color-blue-800: rgb(30 64 175);
  --color-blue-900: rgb(30 58 138);
  --color-blue-950: rgb(23 37 84);
}

FAQ

Same wording as the canonical FAQ.

Open Theme Studio at https://base-ui.net/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. color="primary" keeps using blue-* tokens.

Yes — class-based dark mode on <html>, components pair light/dark classes (bg-white dark:bg-slate-800).

Node 22+, a modern standalone Angular app (Angular 22+), and Tailwind CSS v4. Works with standard Tailwind — no custom theme required.