Installation

1. Requirements

React 19 and Tailwind CSS v4.

2. Add a component

npx shadcn add https://werewolf-ui.vercel.app/r/button.json

This also adds styles/werewolf.css, the tokens every component uses, and any other component it needs.

3. Import the tokens once

In your root CSS file, after @import "tailwindcss", import styles/werewolf.css with a path relative to that CSS file.

@import "../styles/werewolf.css";

In a Next.js app the root CSS file is usually app/globals.css, so the line is @import "../styles/werewolf.css";. Do this once. Every component after that just works.

4. Give your agent the rules

Have your agent read the design skill before it writes UI.

5. Pick your own accent

Use the accent picker in the header, then copy or download the file and replace styles/werewolf.css.

6. Local CLI alpha

Local init, add and theme are implemented for review. This package is not published. Build and install a local tarball from the repository before running these commands. The public registry flow above remains available.

npx werewolf-ui init --yes --json
npx werewolf-ui add button input dialog --yes --json
npx werewolf-ui theme --accent "<hex>" --yes --json

The alpha requires Node 20+, React 19 and Tailwind CSS v4 in a Next.js app-router or Vite React TypeScript app with compiler aliases. Use --cwd to select the app. Init installs tokens, their CSS import and agent rules. Component APIs remain draft. Consumer lint, platform token export with decided native touch sizing (tokens build) and the five-tool MCP stdio server are available in the installed local tarball. The npm package is not published. Read the CLI README for export commands, seed preservation and rollback limits.

npx werewolf-ui lint src --json
npx werewolf-ui lint src --fix --yes --json

Lint reports static styling and repairs only proven edits. Ambiguous colors remain errors with suggestions; dynamic styles remain warnings. It checks repaired content before writing and rolls back on write failure. Read coverage even when the exit code is zero.

npx werewolf-ui mcp --cwd /absolute/path/to/app

Configure a compatible MCP client to launch that local process with an explicit existing root. It exposes read-only catalog, search, component, theme and lint tools. Stdout is protocol traffic even with --json; diagnostics use stderr. MCP never installs, fixes or writes consumer files. See docs/mcp.md in the repository for the client-neutral configuration and verified client boundary.

npx werewolf-ui docs button
npx werewolf-ui add --help

Docs prints the page URL for a component, or this installation page without a name, and opens it only in an interactive terminal. Each command prints its own options with --help.

Theme preserves omitted choices and seed metadata; --yes never overwrites user edits. Edited generated CSS requires its exact --overwrite path. Add preserves existing theme bytes and refuses differing components, including dependencies, without explicit component overwrite. Read the CLI README for rollback limits and local tarball instructions.