Bridge UI

Overview

Why Bridge UI—shared React and Vue components on one design system.

Bridge UI is a component library for React and Vue with a shared foundation in @bridge-ui/core. You get the same API, design tokens, and behavior on both frameworks—so product and design stay consistent whether the UI is React, Vue, or both.

Use the framework selector in the site header to switch between React and Vue across the docs.

Why Bridge UI

Strength What you get
One design system, two frameworks Same props, variants, and patterns on React and Vue
Shared core Logic and tokens in @bridge-ui/core (transitive); adapters stay thin
Tailwind CSS v4 Semantic colors (primary, error, …) you remap in your theme
App-wide customization Defaults, formDefaults, class slots, and tokens via BridgeUIProvider
AI-ready Optional agent guidelines and Cursor skills via the package CLI
Typed overrides Extend prop unions and provider config with TypeScript module augmentation
Imperative actions Modals, dialogs, and snackbars from anywhere with BridgeUIHosts
Stack-agnostic Works with Next, Nuxt, Vite, and Inertia backends (Laravel, Django, …)
Open source Issues and PRs on GitHub

Guides in this section

Guide Description
Installation Install packages, import the theme, mount the provider
Quick start Minimal path to a working Button
AI skills Agent guidelines and Cursor skills
Project structure Packages, import paths, and config surface
Dual apps React + Vue products and framework migrations
Troubleshooting Theme, provider, actions, and Tailwind fixes
Contributing Parity guidelines and how to contribute

Next steps