Bridge UI

Installation

Install Bridge UI, import the theme, and mount the provider for React or Vue.

This guide covers the common path for any Vite- or bundler-based app: install packages, import the theme, wrap your tree with providers, then render a component.

Use the framework selector in the site header to switch between React and Vue. For Next.js, Nuxt, or Inertia backends, follow the matching Integrations guide after these basics.

Prerequisites

Tailwind CSS v4 in your app stylesheet - A React 18+ or Vue 3 app - Node.js and a package manager (npm, pnpm, yarn, or bun)

Packages are published on npm as 0.0.3.

  1. Install packages

    Install the framework adapter. @bridge-ui/core is pulled in automatically—you do not need to install it separately:

    bun add @bridge-ui/[email protected]
    bun add @bridge-ui/[email protected]
Package Role
@bridge-ui/react React components, provider, actions, theme, and AI resources
@bridge-ui/vue Vue components, provider, plugin, actions, theme, and AI resources
@bridge-ui/core Shared types and tokens (transitive dependency—import types if needed)

Icons are optional: pick any library and wire an icon adapter, or pass concrete icon components where needed.

  1. Import the theme

    Import the framework theme after Tailwind so Bridge UI sources and semantic color tokens are available:

    @import "tailwindcss";
@import "@bridge-ui/vue/theme.css";

    @import "tailwindcss";
@import "@bridge-ui/react/theme.css";

    To remap palettes (primary, error, …), see Theme colors.

  2. Mount the provider

    Wrap your app (or root layout) with BridgeUIProvider. Include BridgeUIHosts if you use imperative actions (modal, dialog, snackbar):

    <script setup lang="ts">
import { BridgeUIProvider } from "@bridge-ui/vue";
import { BridgeUIHosts } from "@bridge-ui/vue/Actions";
</script>

<template>
  <BridgeUIProvider :global="{}" :components="{}">
    <BridgeUIHosts
      :modal="{ modal: { transition: 'fade' } }"
      :dialog="{ modal: { transition: 'fade' } }"
      :snackbar="{ max: 3, timeout: 5000, position: 'bottom-center' }"
    >
      <slot />
    </BridgeUIHosts>
  </BridgeUIProvider>
</template>

    import { BridgeUIProvider } from "@bridge-ui/react";
import { BridgeUIHosts } from "@bridge-ui/react/Actions";
import type { PropsWithChildren } from "react";

const Layout = ({ children }: PropsWithChildren) => (
  <BridgeUIProvider global={{}} components={{}}>
    <BridgeUIHosts
      modal={{ modal: { transition: "fade" } }}
      dialog={{ modal: { transition: "fade" } }}
      snackbar={{ max: 3, timeout: 5000, position: "bottom-center" }}
    >
      {children}
    </BridgeUIHosts>
  </BridgeUIProvider>
);

export default Layout;

  3. First component

    Import from the framework package and render:

    <script setup lang="ts">
import { Button } from "@bridge-ui/vue/Components/Button";
</script>

<template>
  <Button>Save</Button>
</template>

    "use client";

import { Button } from "@bridge-ui/react/Components/Button";

export function Example() {
  return <Button>Save</Button>;
}

On Vue you can also register Bridge UI with createBridgeUI() when creating the app. Pass global and components into createBridgeUI({ ... }) if you want shared defaults; the provider merges with those options:

import { createApp } from "vue";
import { createBridgeUI } from "@bridge-ui/vue";
import App from "./App.vue";

createApp(App).use(createBridgeUI()).mount("#app");

For Nuxt, register the same plugin under plugins/—see Nuxt.

On React, pass global and components directly to BridgeUIProvider (see the layout above). Framework-specific wiring for App Router is covered in Next.js.

Tip

When your stack needs more than this global setup, continue with a framework guide below.

Framework guides

Guide When to use
Next.js React App Router + client providers
Nuxt Vue Nuxt plugin + layout
Laravel + Inertia Vite entries and Inertia pages
Django + Inertia Inertia client + Django views
Rails + Inertia Inertia + Vite Ruby
Elixir + Inertia Phoenix assets + Inertia

Next steps