A command modal where items open sub-pages, shown as breadcrumb chips inside the search field, and Backspace walks back out. Searching from the root also finds options nested one level down.
npx shadcn@latest add https://hyperblur.dev/r/modal-command-pages.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-command-pages.tsx.
import { ModalCommandPages } from "@/components/hyperblur/modal-command-pages"
<ModalCommandPages onSelect={(item, path) => run(path)} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Search or jump to…" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| items | { id: string; label: string; group?: string; hint?: string; shortcut?: string[]; icon?: string; keywords?: string[]; children?: CommandPageItem[] }[] | Navigate, Actions, Preferences | Command tree. Items with children open a page; icon is an SVG path in a 16 by 16 box. |
| placeholder | string | "Type a command or search" | Search placeholder on the root page. |
| hotkey | boolean | true | Opens with Command K or Control K (ignored when embedded). |
| onSelect | (item: CommandPageItem, path: string[]) => void | undefined | Called when a leaf command runs, with the ids from root to item. |
| accent | string | "#2f7bff" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |