@create-ui/cli 0.5.3 → 0.5.5

package/dist/skills/createui/mcp.md

@@ -1,12 +1,11 @@
 # Create UI MCP Server
 
-The Create UI MCP server lets AI assistants browse, search, and install components from registries through the Model Context Protocol.
+The Create UI MCP server lets AI assistants browse, search, and install components from the `@createui` registry through the Model Context Protocol.
 
 ## Contents
 
 - [Setup](#setup)
 - [Available Tools](#available-tools)
-- [Configuring Registries](#configuring-registries)
 - [Usage Examples](#usage-examples)
 
 ## Setup
@@ -33,14 +32,14 @@ Supported clients and the config path each one writes:
 | `codex` | `.codex/config.toml` |
 | `opencode` | `opencode.json` |
 
-The generated config always runs `npx createui@latest mcp`. For example, the `claude` client writes:
+The generated config always runs `npx @create-ui/cli mcp` (the package is `@create-ui/cli`; there is no bare `createui` npm package). For example, the `claude` client writes:
 
 ```json
 {
   "mcpServers": {
     "createui": {
       "command": "npx",
-      "args": ["createui@latest", "mcp"]
+      "args": ["@create-ui/cli", "mcp"]
     }
   }
 }
@@ -48,7 +47,7 @@ The generated config always runs `npx createui@latest mcp`. For example, the `cl
 
 ## Available Tools
 
-The MCP server exposes seven tools:
+The MCP server exposes seven tools. **`@createui` is the only registry** — it is built in and needs no configuration, and there are no other registries to add. Wherever a tool takes a `registries` array, pass `["@createui"]`.
 
 ### get_project_registries
 
@@ -80,7 +79,7 @@ Searches for items across registries by query string.
 Returns detailed information about specific items.
 
 **Inputs:**
-- `items` (string[]) — e.g. `@createui/button`
+- `items` (string[]) — bare item names, e.g. `button` (the MCP server also accepts a `@createui/` prefix and strips it)
 
 ### get_item_examples_from_registries
 
@@ -105,31 +104,6 @@ Returns a checklist to verify after adding components.
 
 > **Tip:** The MCP server has no equivalent for inspecting project configuration. To print the resolved aliases, framework, and Tailwind setup, run the `info` command directly: `npx @create-ui/cli info`.
 
-## Configuring Registries
-
-Configure additional registries under the `registries` field in `components.json`:
-
-```json
-{
-  "registries": {
-    "@acme": "https://acme.com/r/{name}.json",
-    "@private": {
-      "url": "https://api.company.com/r/{name}.json",
-      "headers": {
-        "Authorization": "Bearer ${MY_TOKEN}"
-      }
-    }
-  }
-}
-```
-
-- Registry namespaces must start with `@`.
-- A registry can be a plain URL string (`@acme`) or an object with `url`, `headers`, and `params` (`@private`).
-- URL templates contain a `{name}` placeholder that is replaced with the item name.
-- `${VAR}` expands from environment variables, which is useful for tokens and secrets.
-
-The `@createui` registry is always built-in and available without any configuration.
-
 ## Usage Examples
 
 Browse the Create UI registry:
@@ -147,5 +121,5 @@ Search for a date picker in @createui
 Install a component:
 
 ```
-Add the button and card components from @createui
+Add the button and select components from @createui
 ```

package/dist/skills/createui/rules/composition.md

@@ -1,18 +1,15 @@
 # Component Composition
 
-How Create UI components fit together. Compose primitives — never reroll a `<select>`, a custom callout, or a hand-styled loading button when a component already exists. Every component name below is in the Create UI registry; add any of them with `npx @create-ui/cli add <name>`.
+How Create UI components fit together. Compose primitives — never reroll a `<select>`, a custom callout, or a hand-styled loading button when a component already exists. Every component name below is in the `@createui` registry; add any of them with `npx @create-ui/cli add <name>`.
 
 ## Contents
 
 - Items always inside their Group component
-- Callouts use Alert
-- Empty states use the Empty component
-- Toast notifications use sonner
+- Callouts use InlineAlert
+- Toasts use the Toast component
 - Choosing between overlay components
-- Dialog, Sheet, and Drawer always need a Title
-- Card structure
 - Button has a `loading` prop — never hand-build a spinner button
-- TabsTrigger must be inside TabsList
+- Tabbed navigation uses TabMenu
 - Avatar always needs AvatarFallback
 - Use existing components instead of custom markup
 
@@ -49,15 +46,13 @@ This applies to every group-based component:
 |------|-------|
 | `SelectItem`, `SelectLabel` | `SelectGroup` |
 | `DropdownMenuItem`, `DropdownMenuLabel` | `DropdownMenuGroup` |
-| `MenubarItem`, `MenubarLabel` | `MenubarGroup` |
-| `ContextMenuItem`, `ContextMenuLabel` | `ContextMenuGroup` |
 | `CommandItem` | `CommandGroup` |
 
 ---
 
-## Callouts use Alert
+## Callouts use InlineAlert
 
-Use `Alert` for inline callouts. Set the tone with the `variant` prop (`default` or `danger`) and compose the parts — `AlertTitle`, `AlertDescription`, and `AlertAction`. Don't hand-roll a styled `<div>`.
+Use `InlineAlert` for callouts. Don't hand-roll a styled `<div>` — and don't look for a shadcn-style generic alert (or a page-banner) component; `InlineAlert` is the callout primitive.
 
 **Incorrect:**
 
@@ -71,108 +66,118 @@ Use `Alert` for inline callouts. Set the tone with the `variant` prop (`default`
 **Correct:**
 
 ```tsx
-<Alert variant="danger">
-  <AlertTitle>Payment failed</AlertTitle>
-  <AlertDescription>Update your card to continue.</AlertDescription>
-  <AlertAction>
-    <Button variant="danger" size="sm">Update card</Button>
-  </AlertAction>
-</Alert>
+import { RiErrorWarningFill } from "@create-ui/assets/icons"
+import { Button } from "@/components/ui/button"
+import {
+  InlineAlert,
+  InlineAlertActions,
+  InlineAlertContent,
+  InlineAlertDescription,
+  InlineAlertHeading,
+  InlineAlertIcon,
+  InlineAlertTitle,
+} from "@/components/ui/inline-alert"
+
+<InlineAlert variant="danger">
+  <InlineAlertIcon>
+    <RiErrorWarningFill />
+  </InlineAlertIcon>
+  <InlineAlertContent>
+    <InlineAlertHeading>
+      <InlineAlertTitle>Payment failed</InlineAlertTitle>
+      <InlineAlertDescription>Update your card to continue.</InlineAlertDescription>
+    </InlineAlertHeading>
+    <InlineAlertActions>
+      <Button variant="danger" size="md">Update card</Button>
+    </InlineAlertActions>
+  </InlineAlertContent>
+</InlineAlert>
 ```
 
-Related callouts ship as their own components: `inline-alert` for compact, text-row callouts and `alert-banner` for full-width page-level banners. Reach for those instead of restyling `Alert` into a different shape.
+`InlineAlert` takes `variant` (`primary` | `neutral` | `danger` | `success` | `warning` | `info` | `away`) and `appearance` (`default` | `solid` | `soft` | `outline`). For a dismissible callout, add `<InlineAlertClose />` as a direct child and handle `onDismiss` on the root. For a full-width page banner, place an `InlineAlert` in a full-width container — there is no separate banner component.
 
 ---
 
-## Empty states use the Empty component
+## Toasts use the Toast component
 
-Don't hand-build empty/zero states. `Empty` composes a header (`EmptyHeader` → `EmptyMedia`, `EmptyTitle`, `EmptyDescription`) and a `EmptyContent` action area. Use `EmptyMedia variant="icon"` to get the boxed icon treatment.
+Toasts are the registry's own `toast` component — **not `sonner`**. There is no `toast()` function to import; compose the `Toast` parts and render it from your notification state.
 
-```tsx
-import { RiFolderLine } from "lucide-react" // or your project's iconLibrary
-
-<Empty>
-  <EmptyHeader>
-    <EmptyMedia variant="icon">
-      <RiFolderLine />
-    </EmptyMedia>
-    <EmptyTitle>No projects yet</EmptyTitle>
-    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
-  </EmptyHeader>
-  <EmptyContent>
-    <Button>Create Project</Button>
-  </EmptyContent>
-</Empty>
-```
-
----
-
-## Toast notifications use sonner
-
-Toasts come from `sonner`. Import the `toast` function directly — don't build a custom toast component.
+**Incorrect:**
 
 ```tsx
 import { toast } from "sonner"
 
-toast.success("Changes saved.")
-toast.error("Something went wrong.")
-toast("File deleted.", {
-  action: { label: "Undo", onClick: () => undoDelete() },
-})
+toast.success("Draft saved.")
 ```
 
----
-
-## Choosing between overlay components
-
-Pick the overlay that matches the interaction — they all exist in the registry.
-
-| Use case | Component |
-|----------|-----------|
-| Focused task that requires input | `Dialog` |
-| Destructive action confirmation | `AlertDialog` |
-| Side panel with details or filters | `Sheet` |
-| Mobile-first bottom panel | `Drawer` |
-| Quick info on hover | `HoverCard` |
-| Small contextual content on click | `Popover` |
+**Correct:**
 
----
+```tsx
+import { RiCheckboxCircleFill } from "@create-ui/assets/icons"
+import {
+  Toast,
+  ToastAction,
+  ToastBody,
+  ToastContent,
+  ToastDescription,
+  ToastIcon,
+  ToastTitle,
+} from "@/components/ui/toast"
+
+<Toast variant="success" appearance="solid">
+  <ToastBody>
+    <ToastIcon>
+      <RiCheckboxCircleFill />
+    </ToastIcon>
+    <ToastContent>
+      <ToastTitle>Draft saved</ToastTitle>
+      <ToastDescription>Your changes are synced to the cloud.</ToastDescription>
+    </ToastContent>
+  </ToastBody>
+  <ToastAction>Undo</ToastAction>
+</Toast>
+```
 
-## Dialog, Sheet, and Drawer always need a Title
+`Toast` takes `variant` (`primary` | `neutral` | `danger` | `success` | `warning` | `info` | `away`) and `appearance` (`solid` | `soft` | `outline` | `default`), plus an `onDismiss` callback. Add `<ToastClose />` for an explicit close affordance and `<ToastProgress />` for an auto-dismiss countdown bar.
 
-`DialogTitle`, `SheetTitle`, and `DrawerTitle` are required for accessibility — screen readers announce them. Keep one even when the design hides it visually; add `className="sr-only"` in that case.
+There is no provider, queue, or stacking system — you own the notification state and the placement. Render active toasts from your state into a fixed container:
 
 ```tsx
-<DialogContent>
-  <DialogHeader>
-    <DialogTitle>Edit Profile</DialogTitle>
-    <DialogDescription>Update your profile.</DialogDescription>
-  </DialogHeader>
-  ...
-</DialogContent>
+const [toasts, setToasts] = React.useState<AppToast[]>([])
+
+<div className="fixed right-4 bottom-4 flex flex-col gap-2">
+  {toasts.map((t) => (
+    <Toast
+      key={t.id}
+      variant={t.variant}
+      appearance="solid"
+      onDismiss={() => setToasts((all) => all.filter((x) => x.id !== t.id))}
+    >
+      <ToastBody>
+        <ToastContent>
+          <ToastTitle>{t.title}</ToastTitle>
+        </ToastContent>
+      </ToastBody>
+      <ToastClose />
+    </Toast>
+  ))}
+</div>
 ```
 
 ---
 
-## Card structure
+## Choosing between overlay components
 
-Compose `Card` from its parts — don't dump everything into `CardContent`. `CardAction` slots an action into the header row.
+Pick the overlay that matches the interaction — these are the overlays that exist.
 
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Team Members</CardTitle>
-    <CardDescription>Manage your team.</CardDescription>
-    <CardAction>
-      <Button appearance="ghost" size="sm">Settings</Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>...</CardContent>
-  <CardFooter>
-    <Button>Invite</Button>
-  </CardFooter>
-</Card>
-```
+| Use case | Component |
+|----------|-----------|
+| Short hint on hover | `Tooltip` |
+| "What is this?" helper next to a label | `InfoTooltip` |
+| Action menu on a trigger | `DropdownMenu` |
+| Command palette / quick switcher | `Command` (inline) / `CommandDialog` (modal) |
+
+There is **no dialog, popover, sheet, drawer, alert-dialog, or hover-card component**. The only modal surface is `CommandDialog` (shipped with `command`). For other modal or contextual-panel needs, don't invent a lookalike from raw markup — surface the flow inline (e.g. an expanding section, a dedicated route, or an `InlineAlert` confirmation) or ask the user before hand-rolling an overlay.
 
 ---
 
@@ -198,7 +203,7 @@ Compose `Card` from its parts — don't dump everything into `CardContent`. `Car
 For icons, use the `leadingIcon` / `trailingIcon` props (or `iconOnly` for an icon-only button) — never wrap raw `<svg>` children or add sizing classes; the component sizes the icon per `size`.
 
 ```tsx
-import { RiSearchLine } from "lucide-react" // or your project's iconLibrary
+import { RiSearchLine } from "@create-ui/assets/icons"
 
 <Button leadingIcon={<RiSearchLine />}>Search</Button>
 <Button iconOnly aria-label="Search" leadingIcon={<RiSearchLine />} />
@@ -208,20 +213,25 @@ Remember the Button API: `variant` is `primary | neutral-solid | neutral-light |
 
 ---
 
-## TabsTrigger must be inside TabsList
+## Tabbed navigation uses TabMenu
 
-Never render `TabsTrigger` directly inside `Tabs` — always wrap the triggers in `TabsList`.
+Tabs are the `tab-menu` component — there is no shadcn-style tabs / tabs-list / tabs-trigger set. `TabMenu` wraps `TabMenuItem`s and owns the selection (`defaultValue`, or controlled `value` / `onValueChange`). It renders the menu only — render the active panel yourself from the value; there is no content component.
 
 ```tsx
-<Tabs defaultValue="account">
-  <TabsList>
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">...</TabsContent>
-</Tabs>
+import { TabMenu, TabMenuItem } from "@/components/ui/tab-menu"
+
+const [tab, setTab] = React.useState("overview")
+
+<TabMenu variant="horizontal-line" indicator="bottom" value={tab} onValueChange={setTab}>
+  <TabMenuItem value="overview" label="Overview" />
+  <TabMenuItem value="billing" label="Billing" />
+  <TabMenuItem value="settings" label="Settings" />
+</TabMenu>
+{tab === "overview" && <OverviewPanel />}
 ```
 
+`variant` is `vertical-button` (default) | `vertical-line` | `horizontal-line` | `horizontal-button`; `size` is `sm` | `md` | `lg`. `TabMenuItem` takes `label`, `leadingIcon` / `trailingIcon`, `disabled`, and `asChild` for link tabs.
+
 ---
 
 ## Avatar always needs AvatarFallback
@@ -244,6 +254,7 @@ If a primitive already covers the job, use it — don't reach for raw elements o
 | Instead of | Use |
 |---|---|
 | `<hr>` or `<div className="border-t">` | `<Separator />` |
-| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
 | `<span className="rounded-full bg-green-100 …">` | `<Badge variant="success">Active</Badge>` |
-| A status dot built from a styled `<span>` | `<StatusBadge variant="success">Online</StatusBadge>` |
+| A status dot built from a styled `<span>` | `<StatusBadge variant="success" />` (it renders the dot only — put the label next to it). `variant`: `primary`, `danger`, `success`, `warning`, `info`, `highlighted`, `away`, `verified`, `cyan`, `lime`, `neutral`, `white` — note `danger`, not `error` |
+| A removable tag built from `<span>` + `<button>` | `<Chip onClose={…}>…</Chip>` |
+| A hand-rolled `animate-spin` loading indicator | `<Spinner />` |

package/dist/skills/createui/rules/forms.md

@@ -6,7 +6,7 @@
 - Choosing the right form control
 - InputGroup requires InputGroupControl/InputGroupTextarea
 - Buttons inside inputs use InputGroup + InputGroupButton
-- Option sets (2–7 choices) use ToggleGroup
+- Option sets (2–7 choices) use SegmentedControl
 - Dropdowns use Select
 - FieldSet + FieldLegend for grouping related fields
 - Field validation and disabled states
@@ -59,6 +59,8 @@ import { Input } from "@/components/ui/input"
 
 Use `FieldLabel className="sr-only"` for a visually hidden but accessible label.
 
+Beyond the parts above, `field.tsx` also ships `FieldTitle` (a label for non-labelable controls, connect via `aria-labelledby`), `FieldContent` (wraps the control + description in horizontal layouts), `FieldFooter` (a footer row, e.g. helper + counter), `FieldHelper` (small helper text), and `FieldSeparator` (a divider between fields).
+
 ---
 
 ## Choosing the right form control
@@ -70,14 +72,17 @@ Every control below exists in the registry. Pick by intent:
 | Single-line text | `Input` |
 | Multi-line text | `Textarea` |
 | Dropdown of predefined options | `Select` |
-| Searchable dropdown | `Combobox` |
-| Native HTML select (no JS) | `native-select` |
 | Boolean in a settings row | `Switch` |
 | Boolean in a form | `Checkbox` |
 | One choice from a few options | `RadioGroup` |
-| One choice across 2–7 visible options | `ToggleGroup` |
+| One choice across 2–7 visible options | `SegmentedControl` |
+| Several related on/off options | `CheckboxGroup` / `SwitchGroup` |
 | Verification / OTP code | `InputOTP` |
-| Numeric value with step controls | `input-stepper` |
+| Numeric value with step controls | `InputStepper` |
+| Date | `DateInput` |
+| Phone number | `PhoneInput` |
+| Card details | `CreditCardInput` |
+| Password with a strength meter | `PasswordStrength` |
 
 ---
 
@@ -134,7 +139,7 @@ Never absolutely-position a `Button` over an `Input`. Compose `InputGroup` + `In
 
 ```tsx
 import { InputGroup, InputGroupControl, InputGroupButton } from "@/components/ui/input-group"
-import { RiSearchLine } from "lucide-react"
+import { RiSearchLine } from "@create-ui/assets/icons"
 
 <InputGroup>
   <InputGroupControl placeholder="Search…" />
@@ -156,9 +161,9 @@ import { InputGroup, InputGroupControl, InputGroupAddon } from "@/components/ui/
 
 ---
 
-## Option sets (2–7 choices) use ToggleGroup
+## Option sets (2–7 choices) use SegmentedControl
 
-For a small set of mutually-exclusive (or multi-select) choices, use `ToggleGroup` + `ToggleGroupItem`. Don't hand-roll a row of `Button`s with manual active state. `ToggleGroup` is built on Radix, so it takes `type="single"` or `type="multiple"` and the matching value props (`value` / `defaultValue` / `onValueChange`).
+For a small set of mutually-exclusive choices, use `SegmentedControl` + `SegmentedControlItem`. Don't hand-roll a row of `Button`s with manual active state.
 
 **Incorrect:**
 
@@ -181,28 +186,30 @@ const [selected, setSelected] = useState("daily")
 **Correct:**
 
 ```tsx
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control"
 
-<ToggleGroup type="single" defaultValue="daily">
-  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
-  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
-  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
-</ToggleGroup>
+<SegmentedControl defaultValue="daily">
+  <SegmentedControlItem value="daily">Daily</SegmentedControlItem>
+  <SegmentedControlItem value="weekly">Weekly</SegmentedControlItem>
+  <SegmentedControlItem value="monthly">Monthly</SegmentedControlItem>
+</SegmentedControl>
 ```
 
-Use `type="multiple"` (value is a string array) when more than one option can be active at once. Wrap a labelled toggle group in a `Field` and connect them with `aria-labelledby`:
+`SegmentedControl` is single-select: the value props are `value` / `defaultValue` / `onValueChange` (a string — there is no `type="multiple"`). Style it with `variant` (`primary` | `neutral`) and `appearance` (`flat` | `grouped`); items take `leadingIcon`. When more than one option can be active at once, that's not a segmented control — use `CheckboxGroup` (or `SwitchGroup`) instead.
+
+Wrap a labelled segmented control in a `Field` and connect them with `aria-labelledby`:
 
 ```tsx
 import { Field, FieldTitle } from "@/components/ui/field"
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control"
 
 <Field orientation="horizontal">
   <FieldTitle id="theme-label">Theme</FieldTitle>
-  <ToggleGroup type="single" defaultValue="system" aria-labelledby="theme-label">
-    <ToggleGroupItem value="light">Light</ToggleGroupItem>
-    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
-    <ToggleGroupItem value="system">System</ToggleGroupItem>
-  </ToggleGroup>
+  <SegmentedControl defaultValue="system" aria-labelledby="theme-label">
+    <SegmentedControlItem value="light">Light</SegmentedControlItem>
+    <SegmentedControlItem value="dark">Dark</SegmentedControlItem>
+    <SegmentedControlItem value="system">System</SegmentedControlItem>
+  </SegmentedControl>
 </Field>
 ```
 
@@ -237,7 +244,7 @@ import {
 </Field>
 ```
 
-`Select` accepts `size` (`"xs" | "sm" | "md"`), `invalid`, `disabled`, and `loading`. When it's not inside a `Field`, set these on the `Select` itself. For a dropdown with no JS, reach for `native-select` instead. For a searchable list, use `Combobox`.
+`Select` accepts `size` (`"xs" | "sm" | "md"`), `invalid`, `disabled`, and `loading`. When it's not inside a `Field`, set these on the `Select` itself.
 
 ---
 
@@ -272,7 +279,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 </FieldSet>
 ```
 
-For a single-choice group, swap the checkboxes for a `RadioGroup` inside the same `FieldSet`.
+For a single-choice group, swap the checkboxes for a `RadioGroup` inside the same `FieldSet`. When the group is one logical control, reach for the grouped-control primitives directly: `CheckboxGroup`, `SwitchGroup`, and `RadioGroup`.
 
 ---
 
@@ -298,4 +305,4 @@ import { Input } from "@/components/ui/input"
 </Field>
 ```
 
-This pattern works for every control: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `native-select`, and `InputOTP`.
+This pattern works for every control: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, and `InputOTP`.