Bridge UI

Dual apps

Use Bridge UI in products that ship both React and Vue—or migrate between them.

Bridge UI is built so React and Vue share one design system. That helps when you:

  • Run two frontends (for example React admin + Vue public site)
  • Migrate gradually from one framework to the other
  • Keep design and QA consistent without duplicating tokens

Shared contracts

Keep these aligned across apps:

Shared piece Where it lives
Semantic colors (primary, …) Same @theme remaps after theme.css
Default props / registry tokens Same components shape on the provider
Component API (color, size, …) Identical prop names on React and Vue
Actions behavior Same BridgeUIHosts options when used

Put theme CSS and provider defaults in a shared package or copy the same files into each app so remaps stay identical. See Theme colors and Default props.

Two apps, two adapters

Each app installs the adapter it needs:

  • React app → @bridge-ui/react
  • Vue app → @bridge-ui/vue

@bridge-ui/core is installed transitively with each adapter.

Wire icons separately with an icon adapter if you use semantic names or Bridge chrome that needs icons.

Caution

Do not mix adapters in the same component tree. Import components only from the package that matches the framework of that tree. For AI resources, run the AI install for one framework only—paths collide when both packages write .ai/ and skills.

Migrating framework-to-framework

  1. Match theme and defaults

    Match theme and provider defaults first so visual parity is already done.

  2. Port screens

    Port screens by replacing imports (@bridge-ui/react/... ↔ @bridge-ui/vue/...) and adjusting JSX ↔ templates.

  3. Port actions last

    Port actions hosts and hooks last; API shapes stay close across frameworks.

  4. Compare side by side

    Use this docs site’s framework selector to compare React and Vue snippets side by side.

Props and slots differ slightly (for example className vs class, customProps vs custom-props). Component pages show both idioms.

What stays in core

When contributing or extending the design system, put shared logic and tokens in @bridge-ui/core and wire framework-specific UI in both adapters—see Contributing.