⌘K command palette (cmdk).
import { Command } from "@cooud-ui/ui";
npx cooud-ui add command
Generated from the component's exported types.
Extends ComponentProps<typeof Dialog>
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Command Menu" | — |
description | string | "Search for a command to run..." | — |
On this page
A command palette with fuzzy search — open it with the button or ⌘K / Ctrl+K.
function CommandPalette() {const [open, setOpen] = useState(false);useEffect(() => {const handler = (event: KeyboardEvent) => {if (event.key === "k" && (event.metaKey || event.ctrlKey)) {event.preventDefault();setOpen((value) => !value);}};document.addEventListener("keydown", handler);return () => document.removeEventListener("keydown", handler);}, []);return (<><Button variant="outline" onClick={() => setOpen(true)}>Open command palette<Badge variant="secondary" className="ml-1 font-mono text-[10px]">⌘K</Badge></Button><CommandDialogopen={open}onOpenChange={setOpen}title="Command palette"description="Search for a command to run."><CommandInput placeholder="Type a command or search…" /><CommandList><CommandEmpty>No results found.</CommandEmpty><CommandGroup heading="Suggestions"><CommandItem onSelect={() => setOpen(false)}><CalendarDays aria-hidden="true" />Calendar</CommandItem><CommandItem onSelect={() => setOpen(false)}><User aria-hidden="true" />Search profile</CommandItem><CommandItem onSelect={() => setOpen(false)}><Copy aria-hidden="true" />Copy link</CommandItem></CommandGroup><CommandSeparator /><CommandGroup heading="Settings"><CommandItem onSelect={() => setOpen(false)}><Settings aria-hidden="true" />Settings<CommandShortcut>⌘S</CommandShortcut></CommandItem><CommandItem onSelect={() => setOpen(false)}><Keyboard aria-hidden="true" />Keyboard shortcuts<CommandShortcut>⌘K</CommandShortcut></CommandItem><CommandItem onSelect={() => setOpen(false)}><LifeBuoy aria-hidden="true" />Help & support</CommandItem></CommandGroup></CommandList></CommandDialog></>);}