bpdm/ui

Introduction

One design system, the same components in React and Angular.

bpdm/ui is an accessible, themeable component library built on one shared set of design tokens — with native implementations for React (@bpdm/ui) and Angular (@bpdm/ng). Same look, same behavior, in both frameworks.

Why bpdm/ui

  • One source of truth — colors, spacing, radius and motion live in @bpdm/tokens; both frameworks render identically.
  • Accessible by default — built on Radix (React) and the Angular CDK, following WAI-ARIA patterns.
  • Themeable — four built-in themes via a data-theme attribute; override any token.
  • 38 components, shipping in both frameworks today.

The packages live in this monorepo; npm publishing is in progress. Until then, browse every component live in Storybook.

Installation

npm install @bpdm/ui
npm install @bpdm/ng

Import the design tokens once in your global stylesheet (after Tailwind):

@import "tailwindcss";
@import "@bpdm/tokens/tokens.css";

Next

On this page