@noorddev/vlak

Vlak core: the design tokens, the CSS, and the typed component registry. Zero dependencies. Use it without React.

npm install @noorddev/vlak

CSS

import "@noorddev/vlak/css";

or from HTML:

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
<button class="rs-btn-primary">Primary action</button>

vlak.css is 84 KB (14 KB gzipped) and paints every component through rs-* classes. It is generated from the React package's StyleX leaves, so the two paths never drift. Individual files are exported too: @noorddev/vlak/css/tokens.css, @noorddev/vlak/css/components/button.css, and so on.

Set data-theme="dark" on the root element for the dark scheme. Without it the system preference applies.

Tokens

import { vlakTokens } from "@noorddev/vlak";
vlakTokens.color.light.paper; // "#FAF8F2"

The same tokens as JSON: @noorddev/vlak/tokens. As custom properties: css/tokens.css.

Registry

import { catalogComponents, vlakComponents } from "@noorddev/vlak";

Every component as data: name, title, description, category, the classes it uses, its CSS file, its React entry, a markup snippet, its dependencies, a React example, when to use and avoid it, its keyboard interactions, accessibility notes, and aliases (shadcn/ui, Radix, and common names). The docs site, the CLI, the MCP server, the shadcn registry, and the test suite all read from it.

Props

import props from "@noorddev/vlak/props" with { type: "json" };

props/props.json lists every export of every component (VlakPropsJson in src/schema.ts): kind, description, the DOM attribute type the props extend, and each own prop with its type, whether it is required, its default, and its JSDoc. Generated from the React sources by scripts/build-props.mjs; never edited by hand.

Docs for agents

scripts/build-docs.mjs writes registry/docs/: one markdown page per component (install paths, example, props tables, keyboard, accessibility, classes), index.md, tokens.md, guide.md, and llms.txt. The site serves them at vlak.dev/docs/<name>.md and vlak.dev/llms.txt; the CLI prints them with docs <name>; @noorddev/vlak-mcp exposes them as tools and resources.

Layers

All rules sit in cascade layers (vlak.tokens, vlak.base, vlak.type, vlak.components, vlak.touch, vlak.motion). Unlayered author CSS wins without !important.

Typeface

Inter, SIL Open Font License 1.1, vendored under css/fonts/inter/ with its licence.

Docs: vlak.dev. Licence: MIT.