@create-ui/cli 0.1.0-beta.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/mcp/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{b as server}from'../chunk-HRI6QVOR.js';import'../chunk-RJOEUUDA.js';import'../chunk-UPXNWTZZ.js';import'../chunk-Y7WZRQWW.js';//# sourceMappingURL=index.js.map
1
+ export{b as server}from'../chunk-UVIUVCLG.js';import'../chunk-MK3CCMH4.js';import'../chunk-EWAP55CF.js';import'../chunk-Y7WZRQWW.js';//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- export{a as searchRegistries}from'../chunk-RJOEUUDA.js';export{I as RegistryError,M as RegistryFetchError,L as RegistryForbiddenError,N as RegistryLocalFileError,J as RegistryNotFoundError,O as RegistryParseError,K as RegistryUnauthorizedError,S as getRegistry,T as getRegistryItems,U as resolveRegistryItems}from'../chunk-UPXNWTZZ.js';import'../chunk-Y7WZRQWW.js';//# sourceMappingURL=index.js.map
1
+ export{a as searchRegistries}from'../chunk-MK3CCMH4.js';export{H as RegistryError,L as RegistryFetchError,K as RegistryForbiddenError,M as RegistryLocalFileError,I as RegistryNotFoundError,N as RegistryParseError,J as RegistryUnauthorizedError,R as getRegistry,S as getRegistryItems,T as resolveRegistryItems}from'../chunk-EWAP55CF.js';import'../chunk-Y7WZRQWW.js';//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
@@ -0,0 +1,212 @@
1
+ ---
2
+ name: createui
3
+ description: Manages Create UI components and projects — adding, searching, viewing, theming, composing, and contributing UI. Provides project context, component patterns, and Create UI semantic tokens. Use when working with the createui CLI (init/add/create/diff/view/search/migrate/mcp), a components.json file, the @createui registry, authoring components with Create UI tokens and themes, or contributing to the Create UI monorepo.
4
+ user-invocable: false
5
+ allowed-tools: Bash(npx @create-ui/cli *), Bash(pnpm createui *), Bash(pnpm dlx @create-ui/cli *)
6
+ ---
7
+
8
+ # Create UI
9
+
10
+ Create UI is a design code system: **one unified styling system + many themes**. Components are added as source code into the user's project via the `createui` CLI, and styled with Create UI's own semantic tokens.
11
+
12
+ It evolved from the shadcn/ui architecture (registry + components-as-source) but is its own system — its own CLI (`createui`), its own registry (`@createui`), and its own tokens and themes. There is no style/base split.
13
+
14
+ > **IMPORTANT:** Run published CLI commands with `npx @create-ui/cli <command>` (or `pnpm dlx @create-ui/cli <command>`). Inside this monorepo, contributors use `pnpm createui <command>` against the local registry — see [contributing.md](./contributing.md).
15
+
16
+ ## Current Project Context
17
+
18
+ Run the `info` command to read the project's config and installed components:
19
+
20
+ ```bash
21
+ npx @create-ui/cli info
22
+ ```
23
+
24
+ `info` prints project info plus the contents of `components.json` (config, aliases, `tailwind.css` path, `iconLibrary`, registries). Run it before adding or editing components so imports, the icon library, and `"use client"` advice match the real project. (There is no `--json` flag.)
25
+
26
+ ## Two Audiences
27
+
28
+ - **Using Create UI in your app** — install components with the CLI, then compose them with the patterns and rules below.
29
+ - **Contributing to this monorepo** — authoring components, the registry build, dev/test scripts → see [contributing.md](./contributing.md).
30
+
31
+ ## Principles
32
+
33
+ 1. **Use existing components first.** Search the registry before writing custom UI: `npx @create-ui/cli search @createui -q "sidebar"`.
34
+ 2. **Compose, don't reinvent.** Settings page = Tabs + Card + Field controls. Dashboard = Sidebar + Card + Chart + Table.
35
+ 3. **Use built-in props before custom classes.** `variant`, `appearance`, `size`, `shape` on `Button`; `size` on `Field` — reach for these before `className`.
36
+ 4. **Use semantic tokens, never raw values.** `bg-static`, `text-body`, `bg-primary-base` — never `bg-blue-500` or hardcoded hex.
37
+
38
+ ## Critical Rules
39
+
40
+ These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
41
+
42
+ ### Styling & Tailwind → [styling.md](./rules/styling.md)
43
+
44
+ - **Use Create UI semantic tokens.** Surfaces `bg-static` / `bg-weak`, text `text-body` / `text-placeholder`, primary `bg-primary-base`. Never raw colors.
45
+ - **`className` for layout, not styling.** Don't override a component's colors or typography.
46
+ - **No `space-x-*` / `space-y-*`.** Use `flex` + `gap-*` (`flex flex-col gap-4` for vertical stacks).
47
+ - **Use `size-*` when width equals height.** `size-10`, not `w-10 h-10`.
48
+ - **Focus is `outline-*`, never `ring-*`.** Components use `outline-2 outline-transparent` + `focus-visible:outline-primary-700`.
49
+ - **Semantic spacing classes only when Figma references a token.** `var(--component/sm,8px)` → `gap-component-sm`; a static `space-space-4` → `gap-4`.
50
+ - **Use `cn()` for conditional classes.** Not manual template-literal ternaries.
51
+
52
+ ### Forms & Inputs → [forms.md](./rules/forms.md)
53
+
54
+ - **Forms use `FieldGroup` + `Field`.** Never raw `div` + `space-y-*` for form layout.
55
+ - **`Field` owns size; children inherit it.** Set `size` on `Field` (`xs` | `sm` | `md`); `Input`, `Select`, etc. read it via context — never downgrade a child.
56
+ - **`InputGroup` uses `InputGroupControl` / `InputGroupTextarea`.** Never a raw `Input` / `Textarea` inside `InputGroup`.
57
+ - **Option sets (2–7 choices) use `ToggleGroup`** with `type="single"` / `"multiple"`. Don't loop `Button` with manual active state.
58
+ - **`FieldSet` + `FieldLegend` group related checkboxes/radios.** Not a `div` with a heading.
59
+ - **Validation: `data-invalid` on `Field`, `aria-invalid` on the control.** Disabled: `data-disabled` on `Field`, `disabled` on the control.
60
+
61
+ ### Component Structure → [composition.md](./rules/composition.md)
62
+
63
+ - **Items always inside their Group.** `SelectItem` → `SelectGroup`; `DropdownMenuItem` → `DropdownMenuGroup`; `CommandItem` → `CommandGroup`.
64
+ - **Use `asChild` for custom triggers.** Polymorphism is `asChild` + Radix `Slot` — `<Button asChild><Link href="/x">Docs</Link></Button>`.
65
+ - **`Button` HAS a real `loading` prop.** `<Button loading>Saving…</Button>` renders a Spinner and blocks interaction — don't compose your own.
66
+ - **Use the right `Button` API.** `variant` (`primary` / `danger` / `success` / `neutral-solid` / …) + `appearance` (`solid` / `outline` / `ghost` / `soft`). There is no `variant="outline"`/`"destructive"`/`"secondary"`.
67
+ - **Dialog / Sheet / Drawer need a Title.** `DialogTitle` etc. for accessibility (`className="sr-only"` if hidden).
68
+ - **Use full Card composition.** `CardHeader` / `CardTitle` / `CardDescription` / `CardContent` / `CardFooter`.
69
+ - **`Avatar` always needs `AvatarFallback`.**
70
+ - **Prefer components over custom markup.** Callouts → `Alert`; empty states → `Empty`; dividers → `Separator`; loading → `Skeleton`; tags → `Badge`; toasts → `toast()` from `sonner`.
71
+
72
+ ### Icons → [icons.md](./rules/icons.md)
73
+
74
+ - **Icons in `Button` go through props.** `leadingIcon` / `trailingIcon` (and `iconOnly` for icon-only buttons) — no `data-icon`.
75
+ - **No sizing classes on icons inside components.** The component sets icon size via CVA — no `size-4` / `w-4 h-4`.
76
+ - **Pass icons as components, not string keys.** `icon={CheckIcon}`, never `icon="check"`.
77
+ - **Match the project's `iconLibrary`.** Default `lucide` → `lucide-react`. After adding a component, swap any registry icon imports to the project's library.
78
+
79
+ ## Key Patterns
80
+
81
+ The most common idioms that differentiate correct Create UI code. For edge cases, see the linked rule files above.
82
+
83
+ ```tsx
84
+ import { Button } from "@/components/ui/button"
85
+ import { Field, FieldGroup, FieldLabel, FieldDescription } from "@/components/ui/field"
86
+ import { Input } from "@/components/ui/input"
87
+ import { ArrowRightIcon, SearchIcon } from "lucide-react"
88
+ import Link from "next/link"
89
+
90
+ // Button: appearance + icon props + loading. No variant="outline", no data-icon.
91
+ <Button appearance="outline" leadingIcon={<SearchIcon />}>Search</Button>
92
+ <Button loading>Saving…</Button>
93
+ <Button asChild appearance="ghost" trailingIcon={<ArrowRightIcon />}>
94
+ <Link href="/docs">Docs</Link>
95
+ </Button>
96
+
97
+ // Forms: FieldGroup + Field. Field owns size; Input inherits it.
98
+ <FieldGroup>
99
+ <Field size="md">
100
+ <FieldLabel htmlFor="email">Email</FieldLabel>
101
+ <Input id="email" type="email" />
102
+ <FieldDescription>We'll never share it.</FieldDescription>
103
+ </Field>
104
+ </FieldGroup>
105
+
106
+ // Spacing: gap-component-sm only when Figma uses a token; otherwise gap-4.
107
+ <div className="flex flex-col gap-4">…</div>
108
+
109
+ // Conditional classes via cn().
110
+ <div className={cn("rounded-lg p-4", isActive && "bg-weak")} />
111
+ ```
112
+
113
+ ## Component Selection
114
+
115
+ | Need | Use |
116
+ | -------------------------- | --------------------------------------------------------------------------------------------------------------------- |
117
+ | Button / action | `Button` (`variant` + `appearance`), `ButtonGroup`, `CloseButton`, `SocialLoginButton` |
118
+ | Form inputs | `Input`, `Textarea`, `Select`, `NativeSelect`, `Combobox`, `Switch`, `Checkbox`, `Radio`, `RadioGroup`, `InputOTP`, `InputStepper`, `Slider`, `Calendar` |
119
+ | Toggle between 2–7 options | `ToggleGroup` + `ToggleGroupItem`, or `SegmentedControl` |
120
+ | Inputs with affordances | `InputGroup` + `InputGroupAddon`, `PasswordStrength` |
121
+ | Data display | `Table`, `Card`, `Item`, `Badge`, `StatusBadge`, `Chip`, `Avatar`, `CountryFlag`, `Kbd` |
122
+ | Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `TabMenu`, `Pagination`, `TextLink` |
123
+ | Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation), `Popover` |
124
+ | Feedback | `sonner` (toast), `Alert`, `AlertBanner`, `InlineAlert`, `Progress`, `Skeleton`, `Spinner` |
125
+ | Command palette | `Command` inside `Dialog` |
126
+ | Charts | `Chart` (wraps Recharts) |
127
+ | Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`, `AspectRatio`, `Carousel` |
128
+ | Empty states | `Empty` |
129
+ | Menus | `DropdownMenu`, `ContextMenu`, `Menubar` |
130
+ | Tooltips / info | `Tooltip`, `InfoTooltip`, `HoverCard`, `Popover` |
131
+
132
+ ## Key Fields (components.json)
133
+
134
+ `info` surfaces these fields — read them before writing imports or advising on directives:
135
+
136
+ - **`aliases`** — the import prefixes (`components`, `utils`, `ui`, `lib`, `hooks`). Use the actual aliases (e.g. `@/components/ui`, `@/lib/utils`), never hardcode.
137
+ - **`rsc`** — when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top.
138
+ - **`tsx`** — whether components are emitted as `.tsx` (default `true`).
139
+ - **`tailwind.css`** — the global CSS file where tokens are defined. Edit this file; never create a new one.
140
+ - **`iconLibrary`** — drives icon imports (default `lucide` → `lucide-react`). Never assume.
141
+ - **`menuColor`** (`default` | `inverted`) / **`menuAccent`** (`subtle` | `bold`) — menu surface treatment.
142
+ - **`registries`** — extra registries beyond `@createui`, e.g. `{ "@acme": "https://acme.com/r/{name}.json" }`.
143
+
144
+ See [cli.md — `info`](./cli.md) and [customization.md](./customization.md) for the full reference.
145
+
146
+ ## Workflow
147
+
148
+ 1. **Get project context** — `npx @create-ui/cli info`.
149
+ 2. **Check installed components first** — before `add`, check the `components` list from `info` or list the `ui` alias directory. Don't import un-added components, and don't re-add installed ones.
150
+ 3. **Find components** — `npx @create-ui/cli search @createui -q "<query>"`.
151
+ 4. **Inspect before adding** — `npx @create-ui/cli view @createui/<name>` to see an item's metadata and files; `npx @create-ui/cli diff <name>` to see what changed upstream for an installed one.
152
+ 5. **Add** — `npx @create-ui/cli add <name>`.
153
+ 6. **Review added files** — read them and verify composition (e.g. `SelectItem` inside `SelectGroup`), imports, and adherence to the Critical Rules. **Replace any icon imports with the project's `iconLibrary`** (e.g. registry `lucide-react` → the project's library), adjusting icon names accordingly.
154
+ 7. **Registry must be explicit** — if the user doesn't say which registry, ask. Don't default on their behalf.
155
+
156
+ ## Updating Components
157
+
158
+ To keep local edits while pulling upstream changes, use the `diff` command — **never fetch raw files manually.**
159
+
160
+ 1. `npx @create-ui/cli diff` — list installed components that have updates.
161
+ 2. `npx @create-ui/cli diff <name>` — show what changed upstream for that component.
162
+ 3. Decide per component: no local changes → re-add; has local changes → read the local file, study the diff, apply upstream changes while preserving your edits.
163
+ 4. `npx @create-ui/cli add <name> --overwrite` replaces files — **only with the user's explicit approval.**
164
+
165
+ ## Quick Reference
166
+
167
+ ```bash
168
+ # Initialize an existing project (writes components.json, installs deps).
169
+ npx @create-ui/cli init
170
+ npx @create-ui/cli init --theme indigo --neutral gray --font-variant v1
171
+
172
+ # Scaffold a new project (or run with no name to build a custom design system in the browser).
173
+ npx @create-ui/cli create my-app --template next
174
+ npx @create-ui/cli create
175
+
176
+ # Add components.
177
+ npx @create-ui/cli add button card dialog
178
+ npx @create-ui/cli add @createui/select
179
+ npx @create-ui/cli add --all
180
+
181
+ # Inspect the registry.
182
+ npx @create-ui/cli search @createui -q "sidebar"
183
+ npx @create-ui/cli view @createui/button
184
+ npx @create-ui/cli diff button
185
+
186
+ # Migrate (e.g. consolidate radix imports, or switch icon library).
187
+ npx @create-ui/cli migrate --list
188
+
189
+ # Set up the MCP server for your client.
190
+ npx @create-ui/cli mcp init --client claude
191
+ ```
192
+
193
+ **Primary themes:** indigo (default), blue, lime, green, red, orange, yellow, cyan
194
+ **Neutral themes:** gray (default), slate, zinc, base, stone
195
+ **Templates:** `next`, `start`, `vite` (plus `next-monorepo` for `init`)
196
+
197
+ ## Detailed References
198
+
199
+ - [cli.md](./cli.md) — every command and flag (init, create, add, diff, view, search, migrate, info, build, mcp, registry).
200
+ - [mcp.md](./mcp.md) — the MCP server, `mcp init` clients, and the available MCP tools.
201
+ - [customization.md](./customization.md) — theming, the `--color-*` / semantic tokens, radius, and dark mode.
202
+ - [contributing.md](./contributing.md) — working inside the monorepo: dev/test scripts, the registry build, authoring components.
203
+ - [rules/styling.md](./rules/styling.md) — semantic tokens, `className` scope, spacing, `size-*`, `outline-*` focus, `cn()`.
204
+ - [rules/forms.md](./rules/forms.md) — `FieldGroup`, `Field` size cascade, `InputGroup`, `ToggleGroup`, `FieldSet`, validation states.
205
+ - [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Separator, Skeleton, Badge, `Button` loading.
206
+ - [rules/icons.md](./rules/icons.md) — `leadingIcon` / `trailingIcon`, icon sizing, passing icons as components.
207
+
208
+ ## Resources
209
+
210
+ - Home: https://createui.co
211
+ - Docs: https://createui.co/docs
212
+ - Registry: https://createui.co/r
@@ -0,0 +1,5 @@
1
+ interface:
2
+ display_name: "Create UI"
3
+ short_description: "Manages Create UI components — adding, searching, updating, styling, and composing UI from the @createui registry."
4
+ icon_small: "./assets/createui-control-small.png"
5
+ icon_large: "./assets/createui.png"
@@ -0,0 +1,309 @@
1
+ # Create UI CLI Reference
2
+
3
+ Configuration is read from `components.json`.
4
+
5
+ The CLI is published as **`@create-ui/cli`** and exposes the **`createui`** bin.
6
+
7
+ - **In a user project (published):** `npx @create-ui/cli <command>` — or install it globally with `pnpm add -g @create-ui/cli` and then run `createui <command>`.
8
+ - **Inside this monorepo (contributors):** `pnpm createui <command>`, which runs the local build against `http://localhost:4000/r` and requires `pnpm v4:dev` to be running. To test against a target app, use `pnpm createui add -c ~/path/to/app`.
9
+
10
+ Examples below use `npx @create-ui/cli <command>`; substitute `pnpm createui <command>` when working in the monorepo.
11
+
12
+ > **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist.
13
+
14
+ ## Contents
15
+
16
+ - Commands: init, create, add, diff, view, search, migrate, info, build, mcp, registry
17
+ - The three "build" things: `create` vs `build` vs `pnpm registry:build`
18
+ - Templates: next, vite, start, next-monorepo
19
+ - Registry & namespaces: builtin `@createui`, `REGISTRY_URL`, custom registries
20
+
21
+ ---
22
+
23
+ ## Commands
24
+
25
+ Program name `createui`. Description: "add items from registries to your project". Print the version with `-v, --version`.
26
+
27
+ ### `init` — Initialize your project and install dependencies
28
+
29
+ ```bash
30
+ npx @create-ui/cli init [components...] [options]
31
+ ```
32
+
33
+ Initializes Create UI in an existing project: writes `components.json`, installs dependencies, and applies the base style and theme. Optionally installs the listed components (names, URLs, or local paths) in the same step.
34
+
35
+ | Flag | Short | Description | Default |
36
+ | ------------------------ | ----- | --------------------------------------------------------------- | ------- |
37
+ | `--template <template>` | `-t` | Template: `next`, `start`, `vite`, `next-monorepo` | — |
38
+ | `--theme <theme>` | | Primary color theme: `indigo`, `blue`, `lime`, `green`, `red`, `orange`, `yellow`, `cyan` | — |
39
+ | `--neutral <neutral>` | | Neutral color theme: `gray`, `slate`, `zinc`, `base`, `stone` | — |
40
+ | `--font-variant <v>` | | Font variant: `v1` | — |
41
+ | `--base-color <color>` | `-b` | DEPRECATED — use `--theme` instead | — |
42
+ | `--yes` | `-y` | Skip confirmation prompt | `true` |
43
+ | `--defaults` | `-d` | Use default configuration | `false` |
44
+ | `--force` | `-f` | Force overwrite of existing config | `false` |
45
+ | `--cwd <cwd>` | `-c` | Working directory | current |
46
+ | `--silent` | `-s` | Mute output | `false` |
47
+ | `--src-dir` | | Use the `src` directory | — |
48
+ | `--no-src-dir` | | Do not use the `src` directory | — |
49
+ | `--css-variables` | | Use CSS variables for theming | `true` |
50
+ | `--no-css-variables` | | Do not use CSS variables for theming | — |
51
+ | `--no-base-style` | | Do not install the base Create UI style | — |
52
+
53
+ Pick a theme with `--theme` and `--neutral`; these are swappable token sets layered on the one Create UI system (there is no style/base split to choose).
54
+
55
+ ### `create` — Create a new project with Create UI
56
+
57
+ ```bash
58
+ npx @create-ui/cli create [name] [options]
59
+ ```
60
+
61
+ Scaffolds a brand-new project. With no arguments it prints "Build your own createui." and opens **https://createui.co/create** in the browser so you can build a custom design system, then choose a framework.
62
+
63
+ | Flag | Short | Description | Default |
64
+ | ----------------------- | ----- | --------------------------------------------- | ------- |
65
+ | `--template <template>` | `-t` | Template: `next`, `start`, `vite` | — |
66
+ | `--preset [name]` | `-p` | Use a preset configuration (interactive list if no name) | — |
67
+ | `--cwd <cwd>` | `-c` | Working directory | current |
68
+ | `--src-dir` | | Use the `src` directory | — |
69
+ | `--no-src-dir` | | Do not use the `src` directory | — |
70
+ | `--yes` | `-y` | Skip confirmation prompt | `true` |
71
+
72
+ `create` scaffolds a **project**; it is not an alias for `init`. To set up Create UI inside an existing project, use `init`.
73
+
74
+ ### `add` — Add a component to your project
75
+
76
+ ```bash
77
+ npx @create-ui/cli add [components...] [options]
78
+ ```
79
+
80
+ Accepts bare names (`button`), namespaced names (`@createui/button`), full URLs, and local paths.
81
+
82
+ | Flag | Short | Description | Default |
83
+ | --------------------- | ----- | -------------------------------------- | ------- |
84
+ | `--yes` | `-y` | Skip confirmation prompt | `false` |
85
+ | `--overwrite` | `-o` | Overwrite existing files | `false` |
86
+ | `--cwd <cwd>` | `-c` | Working directory | current |
87
+ | `--all` | `-a` | Add all available components | `false` |
88
+ | `--path <path>` | `-p` | The path to add the component to | — |
89
+ | `--silent` | `-s` | Mute output | `false` |
90
+ | `--src-dir` | | Use the `src` directory | — |
91
+ | `--no-src-dir` | | Do not use the `src` directory | — |
92
+ | `--css-variables` | | Use CSS variables for theming | `true` |
93
+ | `--no-css-variables` | | Do not use CSS variables for theming | — |
94
+
95
+ ```bash
96
+ # Add by name.
97
+ npx @create-ui/cli add button
98
+
99
+ # Add a namespaced item.
100
+ npx @create-ui/cli add @createui/select
101
+
102
+ # Add from a URL or a local path.
103
+ npx @create-ui/cli add https://createui.co/r/button.json
104
+ ```
105
+
106
+ To check whether installed components are out of date, use the `diff` command (below).
107
+
108
+ ### `diff` — Check for updates against the registry
109
+
110
+ ```bash
111
+ npx @create-ui/cli diff [component] [options]
112
+ ```
113
+
114
+ With no argument, lists the components that have updates available. With a component name, shows what changed upstream.
115
+
116
+ | Flag | Short | Description | Default |
117
+ | ------------- | ----- | ------------------------ | ------- |
118
+ | `--yes` | `-y` | Skip confirmation prompt | `false` |
119
+ | `--cwd <cwd>` | `-c` | Working directory | current |
120
+
121
+ ### `view` — View items from the registry
122
+
123
+ ```bash
124
+ npx @create-ui/cli view <items...> [options]
125
+ ```
126
+
127
+ Prints item metadata plus file contents (as JSON). Items are names or URLs, e.g. `@createui/button`.
128
+
129
+ | Flag | Short | Description | Default |
130
+ | ------------- | ----- | ----------------- | ------- |
131
+ | `--cwd <cwd>` | `-c` | Working directory | current |
132
+
133
+ ### `search` (alias: `list`) — Search items from registries
134
+
135
+ ```bash
136
+ npx @create-ui/cli search <registries...> [options]
137
+ npx @create-ui/cli list <registries...> [options]
138
+ ```
139
+
140
+ Searches one or more registries. Registry names must start with `@` (e.g. `@createui`). Without `-q`, lists items.
141
+
142
+ | Flag | Short | Description | Default |
143
+ | ------------------- | ----- | ---------------------- | ------- |
144
+ | `--query <query>` | `-q` | Search query | — |
145
+ | `--limit <number>` | `-l` | Max items per registry | `100` |
146
+ | `--offset <number>` | `-o` | Items to skip | `0` |
147
+ | `--cwd <cwd>` | `-c` | Working directory | current |
148
+
149
+ ```bash
150
+ # List everything in the built-in registry.
151
+ npx @create-ui/cli search @createui
152
+
153
+ # Fuzzy search.
154
+ npx @create-ui/cli search @createui -q dialog
155
+ ```
156
+
157
+ ### `migrate` — Run a migration
158
+
159
+ ```bash
160
+ npx @create-ui/cli migrate [migration] [options]
161
+ ```
162
+
163
+ Available migrations:
164
+
165
+ - `icons` — migrate to a different icon library.
166
+ - `radix` — migrate to `radix-ui`, consolidating `@radix-ui/react-*` imports into the unified `radix-ui` package.
167
+
168
+ | Flag | Short | Description | Default |
169
+ | ------------- | ----- | ------------------------ | ------- |
170
+ | `--list` | `-l` | List available migrations | — |
171
+ | `--yes` | `-y` | Skip confirmation prompt | — |
172
+ | `--cwd <cwd>` | `-c` | Working directory | current |
173
+
174
+ ### `info` — Get information about your project
175
+
176
+ ```bash
177
+ npx @create-ui/cli info [options]
178
+ ```
179
+
180
+ Prints project information plus the contents of `components.json`. Run this first to discover the project's framework, aliases, resolved paths, and the global CSS file (the `tailwind.css` path is where custom tokens go).
181
+
182
+ | Flag | Short | Description | Default |
183
+ | ------------- | ----- | ----------------- | ------- |
184
+ | `--cwd <cwd>` | `-c` | Working directory | current |
185
+
186
+ ### `build` — Build components for a Create UI registry [EXPERIMENTAL]
187
+
188
+ ```bash
189
+ npx @create-ui/cli build [registry] [options]
190
+ ```
191
+
192
+ For users **publishing their own registry**: compiles a `registry.json` into individual JSON files for distribution. Default input `./registry.json`, default output `./public/r`.
193
+
194
+ | Flag | Short | Description | Default |
195
+ | ----------------- | ----- | ----------------- | ------------ |
196
+ | `--output <path>` | `-o` | Output directory | `./public/r` |
197
+ | `--cwd <cwd>` | `-c` | Working directory | current |
198
+
199
+ This is distinct from the monorepo's `pnpm registry:build` — see the note below.
200
+
201
+ ### `mcp` — MCP server and configuration commands
202
+
203
+ ```bash
204
+ # Start the stdio MCP server.
205
+ npx @create-ui/cli mcp
206
+
207
+ # Initialize MCP configuration for a client.
208
+ npx @create-ui/cli mcp init --client <client>
209
+ ```
210
+
211
+ Running `createui mcp` starts the stdio MCP server. The `mcp init` subcommand writes the MCP config for a client.
212
+
213
+ | Subcommand / Flag | Description | Default |
214
+ | ----------------------- | ----------------------------------------------------------------- | ------- |
215
+ | `mcp` `--cwd <cwd>` | Working directory | current |
216
+ | `mcp init --client <c>` | Client to configure: `claude`, `cursor`, `vscode`, `codex`, `opencode` | — |
217
+
218
+ See [mcp.md](./mcp.md) for the MCP server details, the available tools, and per-client config paths.
219
+
220
+ ### `registry` — Manage registries
221
+
222
+ ```bash
223
+ npx @create-ui/cli registry add [registries...] [options]
224
+ ```
225
+
226
+ The `registry add` subcommand adds registries to `components.json`. Pass a name (`@acme`) or a `name=url` pair where the URL contains `{name}`.
227
+
228
+ | Flag | Short | Description | Default |
229
+ | ------------- | ----- | ----------------- | ------- |
230
+ | `--cwd <cwd>` | `-c` | Working directory | current |
231
+ | `--silent` | `-s` | Mute output | `false` |
232
+
233
+ ```bash
234
+ npx @create-ui/cli registry add @acme=https://acme.com/r/{name}.json
235
+ ```
236
+
237
+ > The legacy `registry:build` and `registry:mcp` commands still exist, but prefer `registry build` and `mcp`.
238
+
239
+ ---
240
+
241
+ ## The three "build" things
242
+
243
+ These are easy to confuse — they do different jobs:
244
+
245
+ | Command | What it does |
246
+ | --------------------------------------- | --------------------------------------------------------------------------------------------- |
247
+ | `createui create` | Scaffolds a new **project**. With no args, opens https://createui.co/create to build a custom design system. |
248
+ | `createui build` | Compiles a **user's own** `registry.json` → `./public/r` so they can publish components. |
249
+ | `pnpm registry:build` (monorepo only) | Rebuilds **this repo's** component registry. Different tool, contributors only — see [contributing.md](./contributing.md). |
250
+
251
+ ---
252
+
253
+ ## Templates
254
+
255
+ The `init` `--template` option accepts:
256
+
257
+ | Value | Framework |
258
+ | --------------- | --------------------- |
259
+ | `next` | Next.js |
260
+ | `vite` | Vite |
261
+ | `start` | TanStack Start |
262
+ | `next-monorepo` | Next.js (monorepo) |
263
+
264
+ ---
265
+
266
+ ## Registry & namespaces
267
+
268
+ The built-in registry namespace is **`@createui`**, which resolves item names to:
269
+
270
+ ```
271
+ https://createui.co/r/{name}.json
272
+ ```
273
+
274
+ So `@createui/button` resolves to `https://createui.co/r/button.json`.
275
+
276
+ ### Overriding the base registry URL
277
+
278
+ The only registry environment variable is **`REGISTRY_URL`**. It defaults to `https://createui.co/r`; the `@createui` namespace appends `/{name}.json`. Override it to point the CLI at a different registry host:
279
+
280
+ ```bash
281
+ REGISTRY_URL=https://staging.example.com/r npx @create-ui/cli add button
282
+ ```
283
+
284
+ ### Custom registries in `components.json`
285
+
286
+ Configure additional registries under the `"registries"` key. Names must start with `@`, and every URL must contain `{name}`.
287
+
288
+ ```json
289
+ {
290
+ "registries": {
291
+ "@acme": "https://acme.com/r/{name}.json",
292
+ "@private": {
293
+ "url": "https://registry.internal.example.com/r/{name}.json",
294
+ "headers": { "Authorization": "Bearer ${MY_TOKEN}" },
295
+ "params": { "team": "${TEAM_ID}" }
296
+ }
297
+ }
298
+ }
299
+ ```
300
+
301
+ - **String form** (`@acme`) is a bare templated URL.
302
+ - **Object form** (`@private`) adds `headers` and/or `params`.
303
+ - `${VAR}` placeholders in the URL, headers, and params are resolved from environment variables.
304
+
305
+ Once configured, add items by namespace:
306
+
307
+ ```bash
308
+ npx @create-ui/cli add @acme/marketing-hero
309
+ ```