Menus2
Command palette
Cmd/Ctrl K palette built on Base UI Autocomplete. No cmdk.
Installation
npx shadcn@latest add @quireui/commandUsage
const [open, setOpen] = useState(false);
<CommandPalette
open={open}
onOpenChange={setOpen}
groups={[
{
heading: "Navigate",
items: [{ value: "settings", label: "Settings", keywords: ["preferences"], onSelect: () => router.push("/settings") }],
},
]}
/>Accessibility
The palette is a dialog named "Command palette". Its search field is named "Search commands" and tells screen readers to use the arrow keys and Enter, and the highlighted command is read as you move.
| Key | Action |
|---|---|
| Cmd/Ctrl+K | Opens and closes the palette. Change the key with hotkey, or pass null to turn it off. |
| Typing | Filters the commands by label and keywords. |
| ā / ā | Moves the highlight. |
| Enter | Runs the highlighted command and closes the palette. |
| Esc | Closes the palette. |
The shortcut on an item is shown as a hint only: while the palette is open, every key goes into the search. Bind the key where the action lives.
API reference
Command
Inline command list. Use CommandPalette for the Cmd+K dialog version.
Prop
Type
Style it with [data-slot="command"].
CommandPalette
Prop
Type