Command
Search and run commands from one list, inline on the page or as a ⌘K palette.
When to use it
Use Command when there are many actions and people know them by name: switching projects, changing settings, running tools. Typing a few letters beats hunting through menus.
Open the palette from a visible button too, so people who don’t know the shortcut can still find it.
CommandThis page
Search and run.
Many actions people know by name.
How it behaves
Pass items to Command, flat or grouped as { value, items }, and render them with CommandList, CommandGroup, and CommandCollection. Base UI filters the items as the query changes; item objects shaped { value, label } filter by label.
The first match stays highlighted, so Enter runs it; arrow keys move the highlight. Handle each command with onClick on CommandItem. This differs from shadcn's cmdk-based Command, which filters its children directly.
CommandDialog places the palette in a modal with an accessible title and description. It opens and closes without animation because a palette is used many times a day; open it from a shortcut such as ⌘K with your own key handler.
CommandShortcut shows a plain Kbd at the end of an item. Give CommandInput a placeholder; it is labeled Search by default.
Build it
Add it with the shadcn CLI:
1pnpm dlx shadcn@latest add https://jzbui.com/r/command.jsonA complete example. Change the values to fit your product:
123456789101112131415161718192021222324252627282930313233343536373839import { Command, CommandCollection, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut} from "@/components/ui/command"
const sections = [ { value: "Suggestions", items: [{ value: "new-document", label: "New document", shortcut: "⌘N" }] }, { value: "Settings", items: [{ value: "preferences", label: "Preferences", shortcut: "⌘," }] }]
<Command items={sections}> <CommandInput placeholder="Type a command or search…" /> <CommandEmpty>No commands found.</CommandEmpty> <CommandList> {(section) => ( <CommandGroup key={section.value} items={section.items} heading={section.value}> <CommandCollection> {(item) => ( <CommandItem key={item.value} value={item} onClick={() => run(item)}> {item.label} {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>} </CommandItem> )} </CommandCollection> </CommandGroup> )} </CommandList></Command>
// In a ⌘K palette<CommandDialog open={open} onOpenChange={setOpen}> <Command items={sections}>…</Command></CommandDialog>The full source is yours to edit once installed: