Install

One command. Pick the path that matches where you're starting from.

Path A — starting a new project

Most common. Kvalt scaffolds a Vite + React + TypeScript app with tokens, the kvalt.json config, a wired-up .mcp.json, plus planning skills and agents under .claude/.

npx @kvalt/cli init my-app

Then:

cd my-app
pnpm install
pnpm dev

You're done. Skip to add your first component below.

Path B — adding Kvalt to an existing project

Already have a repo? Run init against the current directory instead. Kvalt writes kvalt.json and .mcp.json, scaffolds docs/ / .claude/ / knowledge/ non-destructively (won't overwrite existing files), and adds nothing else.

npx @kvalt/cli init .

Then continue to add your first component.

Add your first component

npx @kvalt/cli add button

Components install with their tokens, hooks, and React contexts. Internal dependencies pull transitively — kvalt add button also installs icon, typo, the usePress and useReducedMotion hooks, plus the motion and icon tokens.

Every file is stamped with a version header (// @kvalt-component button, // @kvalt-version 0.1.0) so the diff and update commands know what's installed.

Requirements

• Node 18 or later (Node 20+ recommended)
• pnpm, npm, or bun — Kvalt is package-manager agnostic
• An MCP-aware AI client to use the live spec server. Claude Code works out of the box

Next

→ Getting started walks through your first project end to end.