Create UI

Design faster. Build cleaner. Scale with one design system.

A modern design code system built on React 19, Tailwind CSS v4, and Radix UI. Components are copied into your project, so you own every line. One unified system, many themes.

Documentation · Components · CLI reference · MCP

Quick start

Scaffold a brand-new project, fully wired up:

npx @create-ui/cli create

Or add Create UI to an existing app:

# set up Tailwind, CSS variables, the cn() util, and your theme
npx @create-ui/cli init

# then add components whenever you need them
npx @create-ui/cli add button badge

That's it. The components land in your codebase as real, editable source files.

Why Create UI

• You own the code. Components are copied into your project, not hidden behind a package. Read them, edit them, ship them.
• One system, many themes. No legacy style/base split. A single styling foundation with themes (light/dark, semantic tokens) layered on top.
• Semantic design tokens. Spacing, radius, typography, and color are tokenized for consistency and effortless theming.
• Accessible by default. Built on Radix UI primitives with sensible keyboard and screen-reader behavior baked in.
• AI-native. A built-in MCP server and agent skill let assistants like Claude Code and Cursor add and compose components for you.
• Bring your own registry. Add from the official registry, a custom one, a URL, or a local path. Build and publish your own.

Installation

Run on demand with npx (recommended, always the latest version):

npx @create-ui/cli <command>

Or install globally and call the createui binary directly:

pnpm add -g @create-ui/cli
createui <command>

Commands

create

Scaffold a new project with Create UI preconfigured. Run it bare to open the design-system builder in your browser and pick a preset, or pass a name to skip straight to the terminal flow.

npx @create-ui/cli create [name]

| Flag | Description | | ---------------------------- | ----------------------------------------------------------------------------------- | | -t, --template <template> | Framework template: next, vite, start | | -p, --preset [name] | Apply a design-system preset (interactive list if used alone, or pass a preset URL) | | --src-dir / --no-src-dir | Use (or skip) a src/ directory | | -y, --yes | Skip confirmation prompts | | -c, --cwd <cwd> | Working directory (defaults to the current directory) |

init

Initialize an existing project: create components.json, install dependencies, configure Tailwind CSS and CSS variables, add the cn() utility, and install the base style.

npx @create-ui/cli init [components...]

| Flag | Description | | ---------------------------------------- | ------------------------------------------------------------------------------ | | -t, --template <template> | Template: next, start, vite, next-monorepo | | --theme <theme> | Primary color theme (e.g. indigo, blue, lime, rose). Default: indigo | | --neutral <neutral> | Neutral color (e.g. slate, gray, zinc, stone). Default: slate | | --font-variant <variant> | Font variant. Default: inter | | --css-variables / --no-css-variables | Use CSS variables for theming (default: on) | | --no-base-style | Skip installing the base Create UI style | | --src-dir / --no-src-dir | Use (or skip) a src/ directory | | -d, --defaults | Use the default configuration | | -f, --force | Overwrite an existing configuration | | -y, --yes | Skip confirmation prompts | | -c, --cwd <cwd> | Working directory |

add

Add components and their dependencies to your project. Run it without arguments for an interactive multi-select. If components.json is missing, the CLI initializes the project first.

npx @create-ui/cli add [components...]

# a single component
npx @create-ui/cli add inline-alert

# several at once
npx @create-ui/cli add button input field

# everything
npx @create-ui/cli add --all

| Flag | Description | | ---------------------------------------- | ------------------------------------- | | -a, --all | Add every available component | | -o, --overwrite | Overwrite existing files | | -p, --path <path> | Target path for the components | | --css-variables / --no-css-variables | Theme via CSS variables (default: on) | | --src-dir / --no-src-dir | Use (or skip) a src/ directory | | -y, --yes | Skip confirmation prompts | | -s, --silent | Mute output | | -c, --cwd <cwd> | Working directory |

diff

Check installed components against the registry and preview available updates. Run it bare to list every component with pending changes, or pass a name to see its diff.

npx @create-ui/cli diff [component]

view

Print the full details of one or more registry items as JSON, including file contents. Accepts item names or registry URLs.

npx @create-ui/cli view button dialog

migrate

Run a migration to update components and dependencies in place.

# list available migrations
npx @create-ui/cli migrate --list

# run one
npx @create-ui/cli migrate icons

Available migrations: icons (switch icon library) and radix (migrate to radix-ui).

info

Print project and configuration details, including the resolved framework and your components.json.

npx @create-ui/cli info

build

Build a registry into distributable JSON. Reads a registry.json, resolves file imports, validates each item, embeds file contents, and writes the output (default: ./public/r).

npx @create-ui/cli build [registry] --output ./public/r

An experimental registry:build exists for recursive import resolution, and registry:mcp is deprecated in favor of mcp.

AI integration

Create UI is built to work hand in hand with AI coding agents.

MCP server

The CLI ships a Model Context Protocol server that lets an agent browse, search, and add components on your behalf. The server can list and search registries, view full component source, fetch usage examples, return the exact add command for a component, and run a post-generation audit checklist.

Configure it for your client in one step:

npx @create-ui/cli mcp init --client claude

Supported clients and where the config is written:

| Client | Config file | | ----------- | ---------------------- | | Claude Code | .mcp.json | | Cursor | .cursor/mcp.json | | VS Code | .vscode/mcp.json | | Codex | ~/.codex/config.toml | | OpenCode | opencode.json |

To start the server directly (for custom integrations), run npx @create-ui/cli mcp.

Agent skill

Install the Create UI skill so your agent understands the design system and can compose components from natural language.

npx @create-ui/cli skill --client claude

Supported agents: claude (Claude Code), gemini (Gemini CLI), codex, and agents. Use --project to install into the current project instead of your home directory. Once installed, just ask:

Add a Create UI login form.

Frameworks & requirements

• Frameworks: Next.js, Vite, React Router / Remix, and TanStack Start.
• React 19 and Tailwind CSS v4 are required.
• Components are built on Radix UI with class-variance-authority for variants.

Documentation

Full guides, the component catalog, and theming docs live at createui.co/docs. CLI reference: createui.co/docs/cli.

Community

Follow @createuico for updates, or reach the team at [email protected].