Getting started

Developer walkthrough

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.

Small project examples

Start with a form and the Vlak package already connected. Open an example in StackBlitz, or run the commands below from a checkout of the Vlak repository. For a complete working screen, browse the interfaces and their standalone downloads.

Vite and React

A client-side settings form with no framework conventions beyond React.

Open in StackBlitz · View source

pnpm --dir examples/vite-react install
pnpm --dir examples/vite-react dev

Next.js

An App Router page with the global Vlak stylesheet loaded from the root layout.

Open in StackBlitz · View source

pnpm --dir examples/next-app install
pnpm --dir examples/next-app dev

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

• Choosing Vlak: when the system fits, and when Radix, shadcn, or another library is the better choice.
• Frameworks: Next.js, Vite, Remix and React Router, Astro, plain HTML.
• Theming and Tokens: custom properties, the module grid, the text scale.
• StyleX: write your own leaves against Vlak tokens.
• Accessibility: what every component commits to, and how to name things.
• Agents: llms.txt, markdown docs, the registry, and the MCP server.
• Components: every component, with props, keyboard, and markup.
• Use cases: components and interface studies grouped by the work they support.

Built something?

If Vlak made it into a product, prototype, or substantial experiment, tell us what you built. Include what you changed and one constraint that helped or got in the way.