Search for a command to run...
A search-driven command palette built on cmdk. Pair with `CommandDialog` for the canonical `⌘K` modal — the same pattern that powers the search at the top of this sidebar.
The bare <Command> palette — usually embedded inside a popover, a sidebar, or
another container. Use <CommandDialog> when you want the canonical modal ⌘K
experience.
The modal palette. Wire the open/close state yourself; the component does not own its lifecycle so you can bind it to any keyboard shortcut, button, or external trigger. Press ⌘K on this page to open it.
Search for a command to run...
CommandThe root palette. Renders cmdk's Command primitive with our token-aware
styling. All cmdk props are forwarded — most useful are filter (custom
fuzzy-match function) and loop (wrap selection on arrow keys).
CommandDialog| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open) => void | — | Open-state change handler. |
title | string | "Command Palette" | Screen-reader-only dialog title. |
description | string | "Search for a command to run..." | Screen-reader-only dialog description. |
showCloseButton | boolean | false | Whether to render the standard Dialog close ×. Off by default — Escape is enough. |
CommandItemForwards all cmdk Item props. The most relevant:
| Prop | Type | Description |
|---|---|---|
value | string | What cmdk fuzzy-matches against. Concatenate title + description so callers can find items by either. |
onSelect | (value) => void | Fired on click or Enter. Close the dialog inside this handler. |
disabled | boolean | Greys out and excludes from selection. |
keywords | string[] | Extra strings that should match this item — useful for aliasing (e.g. keywords={["search", "find"]}). |
CommandInput, CommandList, CommandEmpty, CommandGroup, CommandSeparator,
CommandShortcut — thin wrappers around the matching cmdk primitives. See the
example source for usage.
⌘K / ⌃K to open the palette — it's the universal expectation since macOS Spotlight.Concatenate searchable strings into value so cmdk can match against any of them. Don't ship a
palette where the description is invisible to search.
Group items with CommandGroup heading={…} — flat lists of 10+ items are slower to scan than
a categorized list.
onSelect — leaving it open after a navigation feels broken.Render CommandShortcut for items that have a real keyboard shortcut, not as decoration.
Animate the palette open with a slow easing or large transform. Command palettes are repeated actions — keep it under 200ms or skip the animation entirely.
Mount more than one CommandDialog per page. Use one palette with conditional groups instead.
Hide the palette behind a button without a keyboard shortcut. The shortcut is the entire point.