Theme colors

Customize Bridge UI semantic color palettes with Tailwind CSS v4.

Bridge UI ships a Tailwind v4 theme file that maps semantic palettes (primary, secondary, success, error, warning, info, dark) to Tailwind color scales. Component styles use utilities like bg-primary-500 and text-error-600, so remapping these tokens rebrands the whole library.

Import the theme

Import the framework theme after Tailwind in your global CSS (for example app.css or globals.css):

@import "tailwindcss";
@import "@bridge-ui/vue/theme.css";

@import "tailwindcss";
@import "@bridge-ui/react/theme.css";

The theme file also declares @source paths so Tailwind scans Bridge UI component CSS. Keep that import in the same stylesheet Tailwind processes.

Default mappings

Out of the box, Bridge UI aliases:

Semantic token	Tailwind scale
dark	slate
primary	teal
secondary	amber
success	green
error	red
warning	yellow
info	blue

Each scale exposes shades 50–950 as --color-<token>-<shade> (for example --color-primary-500).

Remap a palette

Define the same CSS variables in a @theme block after the Bridge UI import so your values win:

@import "tailwindcss";
@import "@bridge-ui/vue/theme.css";

@theme {
  /* Point primary at a different Tailwind scale */
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);
}

@import "tailwindcss";
@import "@bridge-ui/react/theme.css";

@theme {
  /* Point primary at a different Tailwind scale */
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);
}

You can also set absolute colors:

@theme {
  --color-primary-500: oklch(0.55 0.2 265);
  --color-primary-600: oklch(0.48 0.2 265);
  --color-primary-700: oklch(0.4 0.18 265);
}

Tip

Prefer defining the full 50– 950 range used by components (rest, hover, focus, and dark variants).

Extra tokens

The theme also defines --text-2xs / --text-2xs--line-height for compact labels. Override them the same way inside @theme if needed.

Next steps

Default props — change which color each component uses by default
Tokens — add a brand color token beyond the built-in palettes
Type overrides — keep custom tokens typed in TypeScript