Get started

Install

The packages are public on npm under MIT. No token, no .npmrc, no account — and CI needs no secret either.

npm i @gener8v/ui @gener8v/tokens @gener8v/icons

Import the stylesheet, then the components

One stylesheet carries the tokens and every component class. Import it first.

import '@gener8v/ui/styles.css';          // one stylesheet, first
import { Button, Flow, BarChart } from '@gener8v/ui';

Not on React? The same classes work in plain HTML: link styles.css and copy the markup from any component page.

Using Tailwind

The preset maps the same tokens into a Tailwind v4 theme, so utilities and components agree.

npm i @gener8v/tailwind-preset

Teach Claude Code the rules

The plugin gives Claude the hard rules, the class names, where the templates are, and the guidance on which component fits which job — without this repository being open.

/plugin marketplace add gener8v/gener8v.designer.design-system

Enforce it

Copy design/_adherence.oxlintrc.json into the project and point its lint at it. It fails on raw hex, raw px and fonts the system does not provide.

Start from a template

Application shell for an app, Landing page for marketing, Presentation deck for slides, and four worked flows. Copy one and replace the content.