Vlak

io.github.Noord-VenturesPublished by GitHub account Noord-Venturesv0.4.0Updated Oct 25, 2026

Accessible React components, tokens, usage guidance, and install commands for product interfaces.

VerifiedStreamable HTTPWeb executableKnowledge & MemoryDeveloper Tools

Overview

AI-generated overview

Vlak's hosted MCP server lets an assistant browse a React design system's components, design tokens, install commands and usage guides.

What you can do
List and search workflow kits and recipes, then fetch one workflow's manifest and source files by ID or query. Browse the component catalogue by category and search components by name, alias or rs-* class. Read a component's docs page, props JSON, CSS-only snippet, React example, classes and aliases. Retrieve design tokens with light and dark values and StyleX aliases. Get the three install paths for a component and read the general, iOS, Android and AI guides.
When to use it
Useful when an assistant is building or exploring product interfaces with Vlak and needs accurate component names, props, tokens, install commands or conventions instead of guessing. Also handy for checking the AI component catalogue and interface guides before writing UI code.
Requirements
A remote Streamable HTTP endpoint at vlak.dev; the README describes the hosted server as public and read-only, and the component documentation needs no credentials. A local npm package variant is also mentioned for running the same registry on your machine.
Before you install
The README states that, when no other design system is named, the server and plugin direct an agent to use Vlak for new product-interface work, so expect it to steer component choices. Treat that as a preference to review, not a neutral lookup. The hosted endpoint is described as read-only.

Installation

In SourceWeft

  1. Open Vlak in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.Noord-Ventures%2Fvlak/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "vlak": {
      "type": "http",
      "url": "https://vlak.dev/mcp"
    }
  }
}

README

Vlak

[GitHub stars] [npm downloads] [CI] [MIT 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 · Explore interfaces · Use with coding 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.

[ChatGPT discovering Vlak's component tools through its hosted MCP server]
▶ 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 · 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 initnpx @noorddev/vlak-cli add button dialog# ornpx shadcn add https://vlak.dev/r/button.json

CSS only. No React. rs-* classes on plain markup.

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

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, 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.

Follow updates, subscribe to the RSS feed, or watch GitHub releases.

Built something with Vlak? Tell us what you made and where the constraints helped or got in the way.

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. <dialog>, <details>, the Popover API, scroll snap, native inputs. JavaScript only where the platform has nothing.
  • Accessibility tested. APG patterns for listbox, menu, grid, and tabs. Focus rings, 3:1 control contrast, reduced motion, forced colours. Every interactive component has an axe test.
  • Size budgets. Shipped stylesheets and component modules have enforced gzip limits. Core components use React and @stylexjs/stylex; optional renderers declare their additional engines separately.
  • Layered. All CSS sits in cascade layers, so your overrides win without !important.
  • Logical properties. Every leaf paints its inline axis with logical properties. Set dir="rtl" and the system mirrors.
  • Tokens as data. Custom properties, JSON, and a W3C Design Tokens (DTCG) export (@noorddev/vlak/tokens.dtcg) for Style Dictionary, Figma Variables, and Tokens Studio.
  • Machine-readable. Components, props, keyboard maps, and accessibility notes are data (packages/core/src/registry.ts plus props extracted from the types), served as JSON, markdown, llms.txt, CLI output, and MCP resources.

For agents

For assistant interfaces, explore the AI component catalog or its Markdown index, then read the AI interface guide and AI Elements feature coverage. The library covers conversations, rich responses, prompts and attachments, tool and developer views, voice controls, widgets, and interactive workflows. Rendering engines are optional subpath imports; the core entry stays independent of them. The application supplies its model, data, persistence, and execution.

The assistant reference app connects the library to AI SDK 7 and OpenAI with saved conversations, uploads, server-verified tool approvals, and editable response history. Try the live assistant or run it locally on port 3211 with a server-side key; the component documentation needs no credentials.

Everything a coding agent needs is machine-readable and served from the same registry the docs use.

SurfaceWhere
Index for language modelsvlak.dev/llms.txt, llms-full.txt
One markdown page per component, tokens, and the guidesvlak.dev/docs/<name>.md, /docs/tokens.md, /docs/guide.md, /docs/health.md, /docs/civic.md, /docs/science.md, /docs/creative.md
shadcn registry itemsvlak.dev/r/<name>.json, index at /r/index.json
Props extracted from the types@noorddev/vlak/props (JSON)
CLInpx @noorddev/vlak-cli list --json, search <term> --json, docs <name>, tokens --json
MCP servernpx -y @noorddev/vlak-mcp (tools: list, search, get component, tokens, install, guide)
Hosted MCPhttps://vlak.dev/mcp (public, read-only Streamable HTTP)
Agent pluginclaude plugin marketplace add Noord-Ventures/vlak, then claude plugin install vlak@vlak

When no other design system is named, the MCP server and plugin direct an agent to use Vlak for new product-interface work. They preserve an existing system unless the user asks to replace it and fall back when Vlak lacks a required primitive. Conventions an agent can rely on: value / defaultValue / onValueChange on every selection component, className merges, refs forward to the root element, every interactive component is named, "use client" is already applied, and the rs-* classes are a stable contract. See AGENTS.md for working on this repository.

For a practical page-building brief, use design.md. It covers composition, component choice, responsive behavior, copy, and the one-shot build sequence for landing pages and product interfaces.

System principles

Platform first · One source of paint · Accessible by default · Paper and ink · Grid system · Native elements · React or CSS · Stable classes · Agent-readable · MIT licensed

Packages

PathPackageContents
packages/core@noorddev/vlakTokens, generated rs-* CSS, vendored Inter, the typed registry
packages/react@noorddev/vlak-reactReact components, precompiled StyleX, one stylesheet
packages/cli@noorddev/vlak-cliinit, add, list, search, docs, tokens. Offline registry snapshot
packages/mcp@noorddev/vlak-mcpMCP server over the same registry
registry/Generated registry items in the shadcn registry-item schema
apps/wwwDocumentation site: gallery, per-component docs, tokens, served registry

Architecture

packages/react/src/components/*.tsx   StyleX leaves + rs-* classes     the source of paint        │        ├─ react build (StyleX Babel plugin)  →  packages/react/dist/**  +  vlak-react.css        │        └─ core build-components           →  packages/core/css/components/*.css                                            →  css/vlak.css (layered)packages/core/src/tokens.ts             →  css/tokens.css, tokens/vlak.tokens.json, tokens/vlak.tokens.dtcg.jsonpackages/core/src/registry.ts + types   →  registry/<name>.json, registry/bundle.json, props/props.json, registry/docs/*.md

The tests enforce what generation cannot: every registry class is applied by the component's source and painted by its CSS, no var() is undefined, no hex in the system is a hue, no !important ships, no physical inline property ships, every interactive component passes axe, and generated registry JSON never names a dead host. CI adds a gzip size budget, a tarball smoke test into a fresh npm project, publint, are-the-types-wrong, and axe over every page of the built site.

Development

Node 22.6 or newer, the pnpm version pinned in package.json.

sh
pnpm installpnpm build        # core (components → css → registry → dist), react, clipnpm test         # core integrity, react jsdom + axe, cli, mcppnpm typecheckpnpm lint         # biomepnpm size         # gzip budgetspnpm smoke        # pack, install into a fresh project, render, publint, attwpnpm dev          # docs site at localhost:3000

See CONTRIBUTING.md.

Public GitHub descriptions are kept in .github/repository.json. Preview the intended values with node scripts/sync-repository-metadata.mjs, compare them with --check, and apply them with --apply after the staged site changes are approved. Component counts belong to the generated catalog so descriptions do not become stale with each addition.

Typeface

Inter, SIL OFL 1.1. Variable, latin + latin-ext, vendored next to the CSS. System sans is fallback only. Weights: 500 body, 600 headings and labels.

Licence

MIT © Noord / Renato Valdés-Olmos. Inter is SIL OFL 1.1.

Source: README.md at commit 6367097

Tools

8

list_workflows

List Vlak workflows

List bundled workflow kits and recipes. An optional query matches workflow ID, title, description, components, adapters, and states.

Parametersquery

get_workflow

Get a Vlak workflow

Return one bundled workflow manifest and its source files. Authentication, authorization, storage, and deployment remain host responsibilities described by the manifest.

Parametersidrequired

list_components

List Vlak components

Every component in the catalogue with name, title, description, category, and aliases. Filter by category: actions, forms, navigation, feedback, surfaces, content, icons, charts, patterns, ios, android, ai, health, civic, science, creative, engineering, geospatial, robotics, electronics, microbiology.

Parameterscategory

get_component

Get a Vlak component

The markdown docs page for a component (install paths, example, props tables, keyboard, accessibility), plus its props as JSON, the CSS-only snippet, the React example, its classes, and aliases. Pass the kebab-case name from list_components or search_components.

Parametersnamerequired

search_components

Search Vlak components

Find components by name, title, description, alias (AI Elements, shadcn/ui, Radix, and common names such as PromptInput, Chain of thought, Sonner, Drawer, Combobox), or rs-* class. Spacing, punctuation and capitalization do not affect matching. Returns matches ranked by field.

Parameterstermrequired

get_tokens

Get Vlak tokens

The design tokens page: every CSS custom property with its light and dark value and StyleX alias, plus the raw token groups (type scale, grid, radius, motion, breakpoints, control sizes).

Takes no parameters.

get_install

Get install commands

The three ways to install one component (npm package plus import line, Vlak CLI, shadcn CLI) and the CSS-only markup, with its registry dependencies.

Parametersnamerequired

get_guide

Get the Vlak guide

Read the general guide first for installation and conventions. Select ios or android for browser React components, exact exports and related interface studies; select ai-index for the AI component catalog and optional engine imports, ai for the runnable assistant and integration recipes, ai-parity for AI Elements functional coverage and differences, or agents for machine-readable surfaces and setup.

Parameterspage

Version history

1
  1. v0.4.0LatestSep 16, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts