@rothoblaas/design-system

Rothoblaas's React component library — TypeScript components styled with Vanilla Extract, built for our own products.

Quick start

npm install @rothoblaas/design-system

import { Button } from "@rothoblaas/design-system";
import "@rothoblaas/design-system/styles.css";

export function App() {
  return <Button>Click me</Button>;
}

Besides react/react-dom, some components have peer dependencies: react-router-dom (Tabs), react-hook-form (Form), react-select (Select/AsyncSelect), and react-number-format (Numeric). They aren't bundled into dist, so install whichever ones your app actually uses. Tabs calls useNavigate/useLocation internally, so an app using it must already be wrapped in a react-router-dom Router (e.g. BrowserRouter).

The default typeface (Museo Sans) is a commercially licensed font, not covered by this repo's MIT license — see NOTICE.md before reusing this codebase outside Rothoblaas's own products. Consumers can override it without touching the library via the --rb-font-family CSS variable.

Global CSS variables

Set these on :root (or any ancestor) to theme the library without overriding individual component styles:

| Variable | Default | Effect | | ------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --rb-font-family | museo-sans, -apple-system, … | Base font family used across components. | | --rb-font-weight | 100 | Base font weight used across components. | | --rb-accent-color | per-component | Fallback accent color for components that don't set their own accent (e.g. buttons, checkboxes, nav, spinners). Individual components expose their own --<component>-accent variable that takes precedence when set. | | --rb-radius | 0 | Global corner-rounding multiplier. Components compute their border-radius as <max-radius> * var(--rb-radius, 0), so corners are square by default (0); set it to 1 for fully rounded corners. |

:root {
  --rb-accent-color: #0b5fff;
  --rb-radius: 1;
}

--rb-radius is only wired up in components that have rounded corners in their design (e.g. Button, Card, Input, Table, Tabs) — components without corners to round ignore it.

Playground

Browse and test every component locally without publishing:

npm run playground:dev

Development scripts

• npm run build — builds ESM, CJS, and type declarations into dist/
• npm run playground:dev / playground:build — run or build the local demo app
• npm run typecheck — runs TypeScript without emitting files
• npm run test — runs the test suite
• npm run lint / lint:fix — ESLint
• npm run format / format:check — Prettier

Styles are authored with Vanilla Extract in .css.ts files and compiled during the library build.

Releasing

Versioning and the changelog are managed with Changesets:

• npm run changeset — run this in any PR that changes the published package; it asks for a bump type (patch/minor/major) and a summary, and writes a file under .changeset/.
• npm run version — applies pending changesets: bumps package.json's version and updates CHANGELOG.md.
• npm run release — builds and publishes to npm (npm run build then changeset publish).
• git push --follow-tags — to push new tags