Getting started

Install precompiled React components, vendor the StyleX source, or use the CSS classes directly. All three are generated from the same leaves.

1. Install the React package

npm install @noorddev/vlak-react
// app/layout.tsx, main.tsx, or wherever your app starts
import "@noorddev/vlak-react/css";

// anywhere
import { Button, Field, FieldLabel, Input } from "@noorddev/vlak-react";

export function Invoice() {
  return (
    <form>
      <Field>
        <FieldLabel htmlFor="name">Name</FieldLabel>
        <Input plain id="name" />
      </Field>
      <Button type="submit">Send</Button>
    </form>
  );
}

Import the stylesheet once, then import components where you use them. The stylesheet is 42 KB (12 KB gzipped) and carries the tokens, the page base, the type scale, and every component. Inter (SIL OFL 1.1) loads from the package; there is no Google Fonts request and no compiler to configure.

Every component also has a direct export, so you can import only the module you need: import { Button } from "@noorddev/vlak-react/components/button". Stateful components already carry "use client"; import them from a React Server Components tree without a wrapper. Requirements: React 18 or 19.

2. Vendor with the CLI

npx @noorddev/vlak-cli init
npx @noorddev/vlak-cli add button dialog

init writes styles/vlak.css, Inter, a specimen index.html, and vlak.json. Then add copies a component's StyleX leaf and its dependencies into components/vlak/ for your own compiler to own. Works offline; the registry ships inside the CLI.

npx shadcn add https://vlak.dev/r/button.json

The same registry serves shadcn's CLI. Every component is an item at https://vlak.dev/r/<name>.json. Vendored leaves need a StyleX compile; see StyleX.

3. Use CSS only

npm install @noorddev/vlak
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

<button class="rs-btn-primary">Primary action</button>
<button class="rs-btn-ghost">Secondary</button>

No React. vlak.css is 84 KB (14 KB gzipped) and paints every component through rs-* classes on plain markup. It is generated from the same StyleX leaves as the React package, so the two never drift. Each component page shows its markup and classes. Individual files are exported too: @noorddev/vlak/css/tokens.css, @noorddev/vlak/css/components/button.css.

One source of paint

Every component is a StyleX leaf. The React package ships it compiled with one stylesheet; vlak.css is projected from the same leaf onto rs-* classes; vendoring gives you the leaf itself. Import the package, link the CSS, or keep the source in your repository.

Dark scheme

<html data-theme="dark">

Set data-theme="dark" on the root element. Without it the system preference applies; data-theme="light" pins light. color-scheme follows, so native controls and scrollbars match. Details in Theming.

What the stylesheet contains

Six cascade layers, in order: vlak.tokens, vlak.base, vlak.type, vlak.components, vlak.touch, vlak.motion. Your own CSS is unlayered, so it wins without !important. See Layers.

The typeface

Inter, SIL OFL 1.1. The variable face, latin and latin-ext, ships in both packages. System sans is fallback only. Weights: 500 body, 600 headings and labels.

Next