One design system.
Two frameworks.
Ship the same components, props, and variants in React and Vue — built on a shared core, themed with Tailwind, and ready for real products.
<script setup lang="ts">
import { Button } from "@bridge-ui/vue/Components/Button";
</script>
<template>
<Button color="primary">Save</Button>
</template>
import { Button } from "@bridge-ui/react/Components/Button";
export function SaveButton() {
return <Button color="primary">Save</Button>;
}
Stop maintaining two component libraries. Bridge UI gives you one API surface — so product UI stays consistent whether the app is React, Vue, or both.
The same props, variants, sizes, and behaviors across React and Vue. Learn once, ship everywhere.
<Button color="primary" variant="outline" size="sm">
Continue
</Button>
<Button color="primary" variant="outline" size="sm">
Continue
</Button>
Built on solid primitives so focus, keyboard, and labeling patterns stay predictable without extra glue.
<Switch
endLabel="Notifications"
description="Product updates and alerts."
/>
<Switch
endLabel="Notifications"
description="Product updates and alerts."
/>
Customize with tokens, classes, and overrides — without fighting a sealed design system.
@theme {
--color-primary-600: oklch(0.55 0.22 264);
}
@theme {
--color-primary-600: oklch(0.55 0.22 264);
}
Docs cover Next.js, Nuxt, Laravel, Django, Rails, and more — so installation matches how you already ship.
npm install @bridge-ui/vue
npm install @bridge-ui/react
Use Bridge UI where your app already lives — with guides for the frameworks teams actually ship.
Your next UI is one install away.
npm install @bridge-ui/vue
npm install @bridge-ui/react