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.

1. Install the package

npm install @bpdm/ui

npm install @bpdm/ng

2. Set up Tailwind + tokens

bpdm/ui is built on Tailwind CSS v4 and the @bpdm/tokens package. Import Tailwind first, then the bpdm tokens, in your global stylesheet:

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

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

3. 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 {}

Next