Customize Bridge UI theme colors, defaults, classes, design tokens, TypeScript overrides, icons, and i18n.
Bridge UI is built on Tailwind CSS v4 and a typed component registry. You can restyle semantic colors, change app-wide defaults, tweak class slots, add your own prop tokens, and extend TypeScript so custom values stay typed.
Use the framework selector in the site header to switch between React and Vue on the guides below.
Guides
| Guide | Description |
|---|---|
| Theme colors | Map semantic palettes (primary, error, …) in Tailwind |
| Default props | Set component defaults and formDefaults via BridgeUIProvider |
| Classes | Override class slots from the provider or per instance |
| Tokens | Register new sizes, colors, variants, and similar tokens |
| Type overrides | Module augmentation for config and prop unions |
| Icons | Plug an icon library with global.icons |
| i18n | Translate chrome strings with global.i18n |
How config flows
Pass options to BridgeUIProvider (and, on Vue, optionally to createBridgeUI):
| Key | Role |
|---|---|
| global | App-wide settings: theme, locale, direction, formDefaults, icons, i18n |
| components | Per-component defaultProps, classes, and design-token tokens |
Runtime merge order for a prop:
- Library defaults (built into the component)
- global.formDefaults (form controls only)
- components.<Name>.defaultProps from the provider
- Props you pass on the instance (wins)
Class slots merge similarly: provider classes first, then the instance classes prop.