Bridge UI

Project structure

How @bridge-ui/core, react, and vue packages fit together and how to import them.

Bridge UI is a small monorepo of packages. Knowing where logic lives helps when you customize tokens, read types, or contribute.

Packages

Package What it contains
@bridge-ui/react React components, hooks, BridgeUIProvider, actions, theme.css, AI resources
@bridge-ui/vue Vue components, composables, provider, createBridgeUI, theme.css, AI resources
@bridge-ui/core Shared types, design tokens, utilities, and framework-agnostic logic (transitive)

Apps install one adapter (react or vue). Core is a dependency of the adapter—you do not add it to package.json unless you want an explicit pin. You can install both adapters in a monorepo that ships React and Vue UIs—see Dual apps.

Import paths

Framework packages expose subpaths:

Path Use for
@bridge-ui/react or @bridge-ui/vue Provider, createBridgeUI (Vue), re-exports
.../Components/<Name> Individual components (Button, Select, …)
.../Actions BridgeUIHosts, useModalAction, …
.../theme.css Tailwind v4 theme + component sources
.../Provider Provider-only entry (optional)
@bridge-ui/core Shared types only when needed (still resolved via the adapter)

Example component import:

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

Config surface

Customization is typed through @bridge-ui/core (BridgeUIOptions, BridgeUIComponentsConfig). Framework packages ship augments.d.ts so provider classes and defaultProps match React or Vue prop types—see Type overrides.

Runtime config flows through:

  1. Vue createBridgeUI(options) (optional)
  2. BridgeUIProvider global (including formDefaults) + components
  3. Instance props and classes on each component