@niro-npm/bo-ui

Headless React component library + design tokens, used by the Backoffice SPA.

• 25+ components (Button, Card, Dialog, Drawer, Table, Sidebar, Tabs, Toast, …)
• Built on Radix primitives, class-variance-authority, tailwind-merge
• Ships headless — you must use Tailwind v4 in the consumer to get styles
• Themed via CSS variables in a single tokens.css

Install

pnpm add @niro-npm/bo-ui
pnpm add -D tailwindcss@^4 @tailwindcss/vite
pnpm add react react-dom radix-ui lucide-react class-variance-authority clsx tailwind-merge

Setup

1. Enable Tailwind v4 in your build (e.g. @tailwindcss/vite).
2. Import the tokens once in your global CSS, alongside Tailwind:

/* app.css */
@import "tailwindcss";
@import "@niro-npm/bo-ui/tokens.css";

The tokens file declares CSS variables (--ds-color-*, --ds-radius-*, …) and an @theme inline block that exposes them to Tailwind v4 utilities like bg-surface-inverse, text-text-primary, rounded-md, etc. Without Tailwind v4 those classes will be empty.

Use

import { Button, Card, PageHeader } from "@niro-npm/bo-ui";

export function Example() {
  return (
    <Card>
      <PageHeader title="Hello" />
      <Button variant="primary">Click me</Button>
    </Card>
  );
}

Theming

Override any CSS variable from tokens.css in your own stylesheet:

:root {
  --ds-color-accent-primary: #2563eb;
  --ds-radius-md: 8px;
}

License

MIT