# Vlak
**Category:** 💻 Developer Tools
**Repository:** https://github.com/Noord-Ventures/vlak
**Views:** 0
**Installs:** 0
**Upvotes:** 0
**Directory Page:** https://allmcps.com/mcp/vlak
## Description
Accessible React components, tokens, usage guidance, and install commands for product interfaces.
## Claude Desktop Quick Installation
Heuristic fallback — verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low):
```json
"mcpServers": {
"vlak": {
"command": "npx",
"args": ["-y","vlak"]
}
}
```
## Documentation & README
# Vlak
[](https://github.com/Noord-Ventures/vlak/stargazers) [](https://www.npmjs.com/package/@noorddev/vlak-react) [](https://github.com/Noord-Ventures/vlak/actions/workflows/ci.yml) [](LICENSE)
A design system for product exploration with fixed visual rules. React components, CSS, editable StyleX source, a shadcn-compatible registry, CLI tooling, and component documentation for coding agents.
[Browse components](https://vlak.dev/components/) · [Explore interfaces](https://vlak.dev/interfaces/) · [Use with coding agents](https://vlak.dev/docs/agents/)
Use the navbar search or press **⌘K / Ctrl+K** to find components, AI references, guides, and interfaces. Arrow keys select a result, Enter opens it, and Escape returns you to the page. Search runs locally and recognizes familiar API aliases.
▶ Watch ChatGPT discover Vlak and use its component system — 50 seconds.
Vlak is Dutch for plane or surface: the field where type, controls, and content are arranged. A modular grid gives that field its structure.
[vlak.dev](https://vlak.dev) · [github.com/Noord-Ventures/vlak](https://github.com/Noord-Ventures/vlak)
Designed and built at Noord Applied Design Lab in Alkmaar.
## Install
Choose the level of ownership that fits the project. Each path is generated from the same component leaves.
**Import the package.** Precompiled React components and one stylesheet. No compiler to configure.
```sh
npm install @noorddev/vlak-react
```
```tsx
import "@noorddev/vlak-react/css";
import { Button } from "@noorddev/vlak-react";
```
**Vendor the source.** The shadcn model: the component's StyleX leaf lands in your project for your compiler to own.
```sh
npx @noorddev/vlak-cli init
npx @noorddev/vlak-cli add button dialog
# or
npx shadcn add https://vlak.dev/r/button.json
```
**CSS only.** No React. `rs-*` classes on plain markup.
```html
```
Dark scheme: `data-theme="dark"` on the root element. Without it the system preference applies.
Want a working project first? Every [interface study has a standalone Vite and React download](https://vlak.dev/interfaces/), from Duo and Android to calendars, data workspaces, media and 3D. Each download includes setup notes and any third-party asset credits. The smaller Vite and Next.js form examples are in the [installation guide](https://vlak.dev/docs/#base-examples).
Follow [updates](https://vlak.dev/updates/), subscribe to the [RSS feed](https://vlak.dev/rss.xml), or watch [GitHub releases](https://github.com/Noord-Ventures/vlak/releases).
Built something with Vlak? [Tell us what you made and where the constraints helped or got in the way](https://github.com/Noord-Ventures/vlak/issues/new?template=showcase.yml).
## Why Vlak
Vlak treats an interface as a field rather than a stack of cards. Paper, ink, gray, type, and hairlines establish hierarchy. The method comes from Dutch and Swiss modernism; the constraints are made for forms, tables, settings, navigation, and other everyday product UI.
- **One source of paint.** Every component is a StyleX leaf. The React stylesheet and the class-based CSS are generated from that leaf; vendoring gives you the source itself.
- **StyleX first.** Atomic, typed, compiled away. Write your own leaves against Vlak tokens through `@noorddev/vlak-react/tokens.stylex`.
- **Platform first.** `
