Installation

Install the package

npm install @brikdesigns/bds

pnpm add @brikdesigns/bds

bun add @brikdesigns/bds

Wire the token cascade

In your global stylesheet (globals.css, app.css, etc.) import in this order:

@import '@brikdesigns/bds/tokens.css';
@import './styles/theme-{client}.css'; /* your client's theme overrides */
@import '@brikdesigns/bds/styles.css';

Order matters. Foundation tokens load first, the client theme overrides semantic tokens, component CSS reads whatever is current.

Import a component

import { Button } from '@brikdesigns/bds';

export function Example() {
  return <Button variant="primary">Save</Button>;
}

That's it. No provider required for components — they read tokens from the cascade above.

Next: read the cascade rules

The cascade rules page explains the three-layer architecture (foundations → gap-fills → client theme) and why it exists.