Bridge UI

v0.0.1141 components · React & Vue

One design system.
Two frameworks.

Identical props, variants and behaviour in React and Vue — built on @bridge-ui/core, themed with Tailwind, accessible out of the box.

Get started Explore all components

$npm install @bridge-ui/react

Everything around this text is a real Bridge UI component. Go on — click it.

Building…

JS

MK

AR

Ana Reis invited you to Acme.

3 min ago · Bridge UI

Email alerts

Two-factor auth

ProVerifiedBeta

Accept terms

Preferred currency

Monthly target62%

$14,880

One tab list, one visible panel, no layout shift between them.

41 componentsa11y

Scroll to explore

spec

41 components/React + Vue, one API/7 palettes/10 radius tokens/0 runtime deps

Quickstart

Three steps to your first component.

No config file, no codegen, no wrapper layer. The snippets below follow the framework switch in the header.

Full installation guide→

01

Install

One package for your framework, one shared core. No peer-dependency maze.

terminal

$npm install @bridge-ui/react

# core ships as a dependency

$npx bridge-ui-react-ai install

# optional: agent docs

licenseMIT · free and open source

02

Register once

One provider at the root holds theme, locale and direction. Every component reads from it.

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

app.use(
  createBridgeUI({
    global: { theme: "light", locale: "en-US" },
  }),
);

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

<BridgeUIProvider
  global={{ theme: "light", locale: "en-US" }}
>
  <App />
</BridgeUIProvider>;

03

Ship

Import the component and go. Typed props, styled, accessible — nothing left to wire.

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

<template>
  <Button color="primary" size="md">
    Ship it
  </Button>
</template>

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

<Button color="primary" size="md">
  Ship it
</Button>;

renders

The library

Everything, playable.

Every tile below is the real component behaviour — click, toggle, open. Filter by category or search.

Delivery in 2–5 business days.

Expandable sections with one or many open

Surfaces

Deployed

Build 482 is live in production.

Token drift

Two colors differ from the preset.

Inline message with title and icon row

Feedback

Combobox that filters as you type

Inputs

AM

RS

KT

Initials, image or icon fallback

Data display

NewLiveBeta3v0.0.11

Compact status pill in every palette

Data display

Hierarchy trail with collapse support

Navigation

Four variants, seven colors, seven sizes

Inputs

SunMonTueWedThuFriSat

Month grid with keyboard day selection

Date & time

Storage

18.2 GB of 25 GB used across four environments.

Surface with title, body and footer slots

Surfaces

All notifications

Email

Push

Checked, unchecked and indeterminate

Inputs

Date

Single date with a calendar overlay

Date & time

Stay

Date Range Field

Start and end dates in one control

Date & time

Appointment

Date Time Field

Combined date and time picker

Date & time

Event

Date Time Range Field

Date-time window with two endpoints

Date & time

or

React

Vue

Separator rule, horizontal or vertical

Data display

Edge sheet that slides in from any side

Overlay

Any Lucide glyph, sized by token

Data display

Workspace name*

Field label with required and error state

Inputs

Read the docs Changelog GitHub

Anchor with underline and external modes

Navigation

Recent
AM
Ana MoreiraDesign lead
+ 1,240
RS
Rui SantosEngineering
+ 860
KT
Kai TanakaProduct
- 210

Sectioned rows with start and end slots

Data display

Anchored floating actions, portalled

Navigation

Focus-trapped dialog with scroll lock

Overlay

Monthly budget

Numeric input with min, max and step

Inputs

Per-digit pins with paste handling

Inputs

Numbered pages or simple prev and next

Navigation

Secret entry with a visibility toggle

Inputs

Determinate, indeterminate and buffer

Feedback

Starter

Team

Enterprise

Single choice across a named group

Inputs

Listbox dropdown with typed options

Inputs

Loading placeholder in any shape

Data display

Draggable track with stops and tooltip

Inputs

Toast with progress and auto-dismiss

Feedback

Circular busy indicator, four sizes

Feedback

Email digest

Auto-sync

Boolean toggle with labels either side

Inputs

Twelve open tasks across four milestones.

Roving-focus tablist with panels

Navigation

https://

Single-line input with adornments

Inputs

Multi-line input with row control

Inputs

Time

Hour and minute with optional seconds

Date & time

Time range

Time Range Field

From–to times for a single day

Date & time

Segmented track for exclusive or multi options

Inputs

Hover hint anchored to any trigger

Feedback

Showing 41 of 41 components. Full API docs live in the component reference.

Integrations

Fits the stack you already ship.

The same tokens, the same core — wired up for the framework your team already knows.

All integration guides→

Your next UI is one install away.

41 components, two frameworks, one core. Start with the quickstart or open the playground.

Get started Open playground

npm install @bridge-ui/react