Bridge UI

Quick start

Get Bridge UI on screen in a few steps—install, theme, provider, and Button.

A minimal path from empty app to a working Bridge UI button. Use the framework selector for React or Vue. For full detail, see Installation.

Packages are published on npm as 0.0.3.

  1. Install

    bun add @bridge-ui/[email protected]
    bun add @bridge-ui/[email protected]

  2. Theme CSS

    Import the theme after Tailwind in your global stylesheet:

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

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

  3. Provider

    Wrap the root layout (add BridgeUIHosts if you need actions later):

    <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;

  4. Render a Button

    <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>;
}
Tip

You should see a primary solid button. If styles are missing, confirm Tailwind v4 processes the theme import—see Troubleshooting.

Next