Theme

Compose colors, type, and radius.

Pick a style preset, then tune primary, secondary, and dark colors from the Tailwind palette plus font and radius. Preview updates live — grab the CSS and provider snippet when you are ready.

Get Started Theme docs

Customize

Theme builder

Pick a preset to repaint this whole page — header included. Fine-tune colors, font, and radius in the menu; everything applies across the page.

Presets

Primary color

Secondary color

Dark color

Font

Radius

Live preview

Savings targets

Retirement

$420,000 · 65%

65%

Real estate

$85,000 · 32%

32%

Claimable balance

$0.00

Payout threshold

Preferred currency

Minimum amount

Payout date

Payout time

Schedule payout

Notes

Email alerts

Recent activity

PR
Payroll
Income
+$2,400
SP
Spotify
Subscription
-$10.99
BB
Blue Bottle
Food & Drink
-$12.40

Your theme code

Copy the CSS remap and provider defaults into your app. See Customization → Theme · Default props

/* Remap Bridge UI semantic palettes (Tailwind CSS v4)
 * Docs: /customization/theme/
 */
@import "tailwindcss";
@import "@bridge-ui/react/theme.css";

@theme {
  --color-dark-50: var(--color-slate-50);
  --color-dark-100: var(--color-slate-100);
  --color-dark-200: var(--color-slate-200);
  --color-dark-300: var(--color-slate-300);
  --color-dark-400: var(--color-slate-400);
  --color-dark-500: var(--color-slate-500);
  --color-dark-600: var(--color-slate-600);
  --color-dark-700: var(--color-slate-700);
  --color-dark-800: var(--color-slate-800);
  --color-dark-900: var(--color-slate-900);
  --color-dark-950: var(--color-slate-950);
  --color-primary-50: var(--color-teal-50);
  --color-primary-100: var(--color-teal-100);
  --color-primary-200: var(--color-teal-200);
  --color-primary-300: var(--color-teal-300);
  --color-primary-400: var(--color-teal-400);
  --color-primary-500: var(--color-teal-500);
  --color-primary-600: var(--color-teal-600);
  --color-primary-700: var(--color-teal-700);
  --color-primary-800: var(--color-teal-800);
  --color-primary-900: var(--color-teal-900);
  --color-primary-950: var(--color-teal-950);
  --color-secondary-50: var(--color-amber-50);
  --color-secondary-100: var(--color-amber-100);
  --color-secondary-200: var(--color-amber-200);
  --color-secondary-300: var(--color-amber-300);
  --color-secondary-400: var(--color-amber-400);
  --color-secondary-500: var(--color-amber-500);
  --color-secondary-600: var(--color-amber-600);
  --color-secondary-700: var(--color-amber-700);
  --color-secondary-800: var(--color-amber-800);
  --color-secondary-900: var(--color-amber-900);
  --color-secondary-950: var(--color-amber-950);
}

/* Optional: apply the selected font globally */
:root {
  --create-font: "Inter", system-ui, sans-serif;
  font-family: var(--create-font);
}

import { BridgeUIProvider } from "@bridge-ui/react";

const global = { formDefaults: { rounded: "md" } };

const components = {
  Avatar: { defaultProps: { rounded: "md" } },
  Badge: { defaultProps: { rounded: "md" } },
  Button: { defaultProps: { rounded: "md" } },
  Card: { defaultProps: { rounded: "md" } },
  Progress: { defaultProps: { rounded: "md" } },
};

export function App({ children }: { children: React.ReactNode }) {
  return (
    <BridgeUIProvider global={global} components={components}>
      {children}
    </BridgeUIProvider>
  );
}