Get started

Wolf-Rayet is a component library and the tokens behind it, for building product interfaces.

What is here

Components65 components, each with working examples you can interact with.Foundations12 foundations: the tokens, colour, type, spacing and rules the components are built on.

Design in Figma

The library is generated from the same tokens and contracts as the code, so a variant in Figma is one the code accepts. Open a file and duplicate it to your drafts, or add it to your team as a library.

FoundationsColour, ramps, type, space and size, motion and elevation, compared across themes and densities.ComponentsThe components as Figma components. A variant here is one the code accepts.SpecificationsWhich compositions the contracts allow.

Install

One package for the components, and one stylesheet for the tokens.

pnpm add @wolf-rayet/react

Use a component

Import the tokens once in your root layout, then the stylesheet for each component you use.

import '@wolf-rayet/react/css/wolf-rayet.css';
import '@wolf-rayet/react/css/button.css';

import { Button } from '@wolf-rayet/react';

export function Actions() {
  return (
    <Button appearance="primary" onClick={save}>
      Save changes
    </Button>
  );
}