Installation

bpdm/ui ships two framework packages built on one shared token set — @bpdm/ui for React and @bpdm/ng for Angular. Pick the one for your app; the components look and behave identically across both.

All packages are published on npm under the @bpdm/ scope — the install commands below work today. Prefer to browse first? Every component is live at ui.bpdm.dev.

1. Install the package

npm install @bpdm/ui

npm install @bpdm/ng
# @angular/cdk is a peer dependency — install the version matching your Angular major
# (Angular 21 → @angular/cdk@^21, Angular 22 → @angular/cdk@^22):
npm install @angular/cdk@^21

@angular/cdk is a peer dependency (used by the overlay-based components — dialogs, selects, tooltips, popovers).

Match @angular/cdk to your Angular major version. A bare npm install @angular/cdk pulls the latest CDK, whose Angular peer range may be ahead of yours, and npm fails with an ERESOLVE conflict. Pin the major (@angular/cdk@^21), or run ng add @angular/cdk, which picks the version matching your workspace.

2. Set up Tailwind v4

bpdm/ui is built on Tailwind CSS v4, so your app needs Tailwind wired into its build. Install Tailwind and the plugin for your build tool:

With Vite, use the Tailwind Vite plugin:

npm install -D tailwindcss @tailwindcss/vite

Add it to vite.config.ts:

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({ plugins: [react(), tailwindcss()] });

For a PostCSS-based setup (e.g. Next.js) install @tailwindcss/postcss instead and add a postcss.config.mjs:

postcss.config.mjs

export default { plugins: { '@tailwindcss/postcss': {} } };

Angular builds CSS through PostCSS — install the PostCSS plugin:

npm install -D tailwindcss @tailwindcss/postcss

Add a .postcssrc.json at the project root:

.postcssrc.json

{ "plugins": { "@tailwindcss/postcss": {} } }

3. Import Tailwind, the components, and the tokens

In your global stylesheet, import Tailwind, point it at the bpdm packages, then load the tokens:

globals.css

@import 'tailwindcss';
/* Tailwind v4 doesn't scan node_modules by default — tell it to look at the
   bpdm packages, or the components render unstyled. Adjust the path to your node_modules. */
@source '../node_modules/@bpdm/ui';
@source '../node_modules/@bpdm/variants';
@import '@bpdm/tokens/tokens.css';

styles.css

@import 'tailwindcss';
/* Tailwind v4 doesn't scan node_modules by default — tell it to look at the
   bpdm packages, or the components render unstyled. Adjust the path to your node_modules. */
@source '../node_modules/@bpdm/ng';
@source '../node_modules/@bpdm/variants';
@import '@bpdm/tokens/tokens.css';

The @source lines are required. The components apply Tailwind utility classes (bg-primary, h-10, …); without pointing Tailwind at the packages it won't generate that CSS and everything renders unstyled.

The tokens register the design system's colours, radius and motion as CSS variables and Tailwind utilities (bg-primary, text-foreground, …).

4. Verify

Drop a button into your app to confirm everything is wired up.

import { Button } from '@bpdm/ui/button';

export function App() {
  return <Button>It works 🎉</Button>;
}

import { Component } from '@angular/core';
import { BpdmButton } from '@bpdm/ng';

@Component({
  selector: 'app-root',
  imports: [BpdmButton],
  template: `<button bpdmButton>It works 🎉</button>`,
})
export class App {}

Configuration

Themes, dark mode, and tokens

Components

Browse all 38 components