Install

Install from npm

Add the components and the tokens to your product. @bridge-ds/react needs React 18 or later.

npm install @bridge-ds/react @bridge-ds/tokens

Use the components

Import the fonts, the tokens and the base styles once, then wrap the app in ThemeProvider:

import '@bridge-ds/tokens/fonts.css';   // Fraunces, Instrument Sans, IBM Plex, self-hosted
import '@bridge-ds/tokens/tokens.css';  // every token as a CSS variable
import '@bridge-ds/react/styles.css';   // base styles

import { Button, Field, Input, ThemeProvider } from '@bridge-ds/react';

export function App() {
  return (
    <ThemeProvider asRoot theme="light" brand="bridge" density="comfortable">
      <Field label="Repository" description="Owner and name, like acme/design-tokens.">
        <Input placeholder="acme/design-tokens" />
      </Field>
      <Button>Connect repository</Button>
    </ThemeProvider>
  );
}

Theme, brand and density

ThemeProvider sets data-theme, data-brand and data-density together and passes them to portaled overlays. Without React, or for plain CSS, set the three attributes yourself and read the tokens as CSS variables:

<html data-theme="light" data-brand="bridge" data-density="comfortable">

Themes: light, dark. Brands: bridge, ocean. Densities: comfortable, compact. Every component page lets you switch brand and density in its preview toolbar.

Pages without React

Static sites and pages built in plain scripts use @bridge-ds/react/dom. Each renderer is named after its component, badgeHtml, codeBlockHtml, tokenValueHtml, checklistHtml, and returns the exact markup of the React component with the same classes. Call bindTooltips() and bindCodeBlocks() once per page so tooltips and copy buttons work.

import { badgeHtml, bindCodeBlocks, bindTooltips, codeBlockHtml } from '@bridge-ds/react/dom';

row.innerHTML = badgeHtml('Ready', { tone: 'success' }) + codeBlockHtml('npx @bridge-ds/cli check', { label: 'Check tokens' });
bindTooltips();
bindCodeBlocks();

bridge audit counts this markup as DS components. Homemade look-alikes, such as pill classes or data-tip tooltips, count against adoption.

Check tokens from a terminal

In your design system repository, the bridge command validates tokens and runs the contrast gate, with nothing to install first. Use it in CI: exit 0 ok, 1 failures, 2 setup error. To connect Claude, see Agents.

npx @bridge-ds/cli check
npx @bridge-ds/cli tokens "danger text"
npx @bridge-ds/cli help

Packages

• @bridge-ds/react 1.8.6

  The React components. Behavior from Base UI, styling only through tokens.

• @bridge-ds/tokens 1.8.5

  Every token as CSS variables (tokens.css) and TypeScript, plus the self-hosted fonts (fonts.css).

• @bridge-ds/cli 0.21.2

  The bridge command: check tokens and contrast in CI, search and diff tokens, audit adoption in product code.

• @bridge-ds/mcp 0.17.0

  The MCP server that connects Claude to your design system. Setup on the Agents page.

• @bridge-ds/stylelint-plugin 0.2.33

  Flags raw colors, lengths and shadows in product CSS where a token exists, with the token to use.

• @bridge-ds/eslint-plugin 0.2.2

  Flags raw style values and native elements in product code where a token or a component exists.

• @bridge-ds/core 0.35.0

  For tools, not for product UI: config, token loading, alias resolution, contrast, diffs and the GitHub client.

• @bridge-ds/visual 0.3.29

  Visual impact: screenshots what a change touches at both versions and pixel-diffs them.

Figma plugin

DS Bridge connects Figma Variables to the repository. Pull brings the latest tokens from the library into Figma Variables. Push sends your Figma edits back as a pull request for review, with a three-way diff and the contrast gate. It works on the free Figma plan and never writes to the library directly.

1. Download the plugin and unzip it. It is always the latest version.

2. In the Figma desktop app: Plugins, Development, Import plugin from manifest, and pick manifest.json in the bridge-figma-plugin folder.

3. Run it from Plugins, Development, Bridge, then choose Sign in with Bridge and pick your team in the browser. No token to paste.

To update it, unzip the new version over the same folder, replacing its files: nothing to import again. If Figma lists Bridge twice, remove the older copy in Plugins, Development, Manage plugins in development.

The Figma Community listing is in review. Developers can also build it from a clone of Bridge:

npm install
npm run plugin:build

Then import apps/figma-plugin/manifest.json. Full guide in apps/figma-plugin, details in the plugin README.

git clone https://github.com/the-bridge-company/ai-design-system-demo
cd ai-design-system-demo
npm install
npm run pack:packages

npm install /abs/path/ai-design-system-demo/.packs/bridge-ds-tokens-1.8.5.tgz \
  /abs/path/ai-design-system-demo/.packs/bridge-ds-react-1.8.6.tgz