@bekaert-dev/ui

React component library built on @bekaert-dev/design-tokens. All styling uses CSS custom properties for full theme support with light and dark modes.

Installation

pnpm add @bekaert-dev/ui @bekaert-dev/design-tokens

Peer dependencies

• react ^19
• react-dom ^19

Setup

Wrap your app with ThemeProvider to inject design token CSS variables:

import { ThemeProvider } from '@bekaert-dev/ui'

const App = () => (
  <ThemeProvider defaultMode="light">
    <YourApp />
  </ThemeProvider>
)

Set root to apply tokens to :root instead of a wrapper <div>:

<ThemeProvider defaultMode="light" root>
  <YourApp />
</ThemeProvider>

Toggle between light and dark mode with useTheme:

import { useTheme } from '@bekaert-dev/ui'

const ThemeToggle = () => {
  const { mode, setMode } = useTheme()
  return <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>Toggle</button>
}

Components

Typography

| Component | Description | Variants | |-----------|-------------|----------| | Text | Body text | sm, md, lg | | Heading | Section headings | h1–h6 | | Display | Large display text | sm, md, lg |

All typography components accept color (default, muted, inverse) and align (left, center, right) props, and are polymorphic via the as prop.

Actions

| Component | Description | Variants | Intents | Sizes | |-----------|-------------|----------|---------|-------| | Button | Interactive button | solid, outline, ghost | primary, secondary, critical | sm, md, lg | | ButtonLink | Anchor styled as button | Same as Button | Same as Button | Same as Button |

Navigation

| Component | Description | Variants | |-----------|-------------|----------| | Link | Anchor element | default, subtle |

Layout

| Component | Description | Key props | |-----------|-------------|-----------| | Stack | Flexbox stack | direction, gap, align, justify | | Grid | CSS grid | columns (1–12), gap | | Container | Centered max-width container | size (sm–2xl) |

Data Display

| Component | Description | Key props | |-----------|-------------|-----------| | Badge | Status indicator | intent, size | | Alert | Notification banner | intent, title, onDismiss | | Card | Content card | variant (elevated, outlined), padding |

Card has sub-components: CardHeader, CardBody, CardFooter.

Interactive

| Component | Description | Key props | |-----------|-------------|-----------| | Tabs | Tabbed navigation | variant (underlined, solid), size |

Tabs has sub-components: TabList, TabTrigger, TabContent. Built on Radix UI for full keyboard and accessibility support.

Utility

| Component | Description | |-----------|-------------| | Divider | Horizontal or vertical separator | | VisuallyHidden | Screen-reader-only content |

Design tokens

All spacing, colors, typography, radii, shadows, and motion values come from @bekaert-dev/design-tokens via CSS custom properties (--bk-*). No hardcoded values — components adapt automatically when tokens change.

Development

# Run tests
pnpm --filter @bekaert-dev/ui test

# Type check
pnpm --filter @bekaert-dev/ui typecheck

# Build
pnpm --filter @bekaert-dev/ui build

# Storybook (from repo root)
pnpm storybook:dev

License

MIT