Install
What to install, and what to import.
Add the package
pnpm add @wolf-rayet/react
Import the tokens once
Import it in your root layout, before any component stylesheet. Every component reads its values from it.
import '@wolf-rayet/react/css/wolf-rayet.css';
Import the stylesheets you need
There is one stylesheet for each group of components. Import only the ones you use.
| Stylesheet | Covers |
|---|---|
| button.css | Button, icon button, link button, split button, button group. |
| forms.css | Text field, text area, select, checkbox, radio, toggle, range, form, focus ring. |
| labels.css | Lozenge, badge, tag, tag group, avatar, avatar group. |
| overlays.css | Popup, menu, dropdown menu, blanket, modal dialog, drawer. |
| messaging.css | Section message, banner, flag, empty state, inline message, spotlight. |
| feedback.css | Spinner, progress bar, skeleton, progress tracker, breadcrumbs, tooltip, heading, date label. |
| content.css | Icon, image, logo, object, tile, comment, inline edit, table, table tree, calendar, accordion, meter, page, panel. |
| navigation.css | Link, tabs, pagination, page header, progress indicator, code, side navigation. |