Customize Bridge UI theme colors, scroll utilities, defaults, classes, design tokens, TypeScript overrides, icons, dates, and i18n.
Bridge UI is built on Tailwind CSS v4 and a typed component registry. You can restyle semantic colors, apply overflow scroll utilities, 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 |
| Scroll utilities | Overflow fades and scrollbar chrome from theme.css |
| Default props | Set component defaults, formDefaults, and defaultColor 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, prop unions, custom global keys, and custom components |
| Icons | Plug an icon library with global.icons |
| Dates | Plug a date library with global.dates |
| 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, timeZone, direction, formDefaults, defaultColor, icons, dates, i18n |
| components | Per-component defaultProps, classes, and design-token tokens |
Runtime merge order for a prop:
- Library defaults (built into the component)
- global.defaultColor (colorable components only)
- global.formDefaults (form controls only)
- Shared chrome (components.FormField / FormControl / BaseField / TimePanel)
- components.<Name>.defaultProps from the provider
- Props you pass on the instance (wins)
Class slots merge similarly: chrome classes, then the public component, then the instance classes prop.