Introduction

What you get

• Tokens: color, size, radius, spacing, type and motion by role, generated for dark and light mode from three choices. Every theme passes contrast checks before it builds.
• Components: 73 React components on Tailwind CSS v4, copied into your project as source you own. Browse them on Components.
• CLI: npx werewolf-ui sets up tokens and agent rules, adds components, changes the theme, checks styling and exports tokens.
• Agent rules: the design skill plus rule files for Cursor, Claude Code, Codex, Copilot, Windsurf, Gemini CLI, Cline and any agent that reads AGENTS.md.
• MCP server: five read-only tools that let your agent look up components, tokens and rules offline.
• Docs for agents: a Markdown version of every page and llms.txt.

How it works

1. One seed

   tokens/seed.json holds three choices: accent color, gray tint and radius. The theme generator turns them into every token for both modes and refuses a theme that fails contrast.

2. Tokens by role

   Components use token classes such as bg-background-surface and text-text-secondary, never raw colors. Change the seed and every component follows.

3. Rules for your agent

   The design skill tells your agent which token, size and spacing to pick. npx werewolf-ui lint catches what slips through.

Platforms

Components need React 19 and Tailwind CSS v4, in Next.js (app router) or Vite. Tokens also export to CSS, JSON, SwiftUI and Compose. Native components are planned for v2.

Alpha status

The CLI is published on npm as werewolf-ui@0.1.0-alpha.1. Component APIs are drafts and can change between alpha releases; each component page shows its spec status. The changelog lists what changed.

Free and Pro

Tokens, components, the CLI and the MCP server are free under the MIT license. Pro is in pre-sale: whole screens and large agent components, bought once on the Pro page, with installation opening in January 2027. Docs and Pro share one sign-in: sign in on the Pro page with your email and a 6-digit code, and the header shows your account on every page.

How these docs are organized

New here? Start with Installation.