voltrax

React component library for Voltrax, built on the DHM design-token system. Every component is styled exclusively with CSS variables from the voltrax-variables-tokens package and uses its generated dhm-type-* typography classes; the token-bound Component Specs the components are implemented from ship in dist/components/*.json.

Components

Button, MaterialIcon, ListItem, CardLongList, StepCard, ReviewCard, TestimonialCard, ServiceCard.

Install

npm install voltrax

react (18 or 19) is a peer dependency. The token package, the Sora/Manrope fonts, and the Material Icons font are regular dependencies and load automatically.

Usage

import { Button, ServiceCard } from 'voltrax';

// Importing the package once loads the DHM tokens, the typography styles, and
// the fonts. Render inside any React 18/19 app processed by a bundler
// (Vite, webpack, Next.js, etc.) that supports CSS Modules and CSS imports.
export function Example() {
  return <Button variant="secondary">Bekijk service</Button>;
}

Components accept standard HTML attributes for their root element. Icon slots take a custom ReactNode or a Google Material Icons ligature name (e.g. leadingIconName="search").

Scripts

• npm run build — compile src/ to ESM + .d.ts in dist/ and copy the CSS Modules and Component Specs alongside.
• npm run typecheck — strict type check, no emit.
• npm run storybook — component workshop on port 6006.
• npm run check:tokens / npm run check:typography — DHM skill alignment oracles.

Publishing

npm publish runs the type check and build first (prepublishOnly). The published tarball contains dist/ (compiled components + specs) and this README.