Getting started

Plain CSS plus components you own. No runtime dependency.

1. Initialize

npx raster init

Writes styles/raster.css (tokens, base styles, component classes) and raster.json. Link the stylesheet or import it in your root layout. Set data-theme="dark" on the root element for the dark scheme.

2. Add components

npx raster add button dialog switch

Copies React source into components/raster/. Registry dependencies install with it; dialog pulls button. CSS-only components need no code, the classes are already in raster.css; add prints the snippet.

Using shadcn's CLI instead

npx shadcn add https://raster.noord.dev/r/button.json

Each component is also published as a shadcn registry item at /r/<name>.json.

The typeface

Raster is set in Messina Sans (Luzi Type, Zürich). The font is licensed and not bundled. Provide your own @font-face; the stack falls back to system sans. Weights: 500 body, 600 headings and labels.

Coming from Raster 0.1

npx raster init --compat

0.2 renamed every class to the rs- prefix. The compat flag also writes raster-compat.css, which keeps the 0.1 names (bb-*, lib-*, bare table) working.