Component

Command Menu

⌘K-style filterable, keyboard-navigable command palette.

Basic

Type to filter; items with a group are listed under its heading. Choosing one runs its onSelect and closes the palette.

Nothing run yet.

Each item takes id, label and onSelect, plus optional group, icon, shortcut (display only - bind the key yourself) and searchText for extra search terms
open and onOpenChange are optional: omit them and the palette keeps its own state, starting from defaultOpen. It renders no trigger and binds no shortcut, so a palette opened from a button or ⌘K stays controlled, as here

Trigger with a shortcut hint

Kbd renders a single keyboard key/shortcut token - pair it with a visible trigger so the ⌘K chord is discoverable, not the only way in.

⌘K

items also accept a shortcut string, rendered next to each command's label inside the palette

When to use

App-wide quick navigation or actions triggered by a keyboard shortcut (⌘K) - jumping to pages, running commands, switching context.
A searchable list long enough that scanning isn't practical - filtering narrows it as the user types.

When not to use

A short, fixed action list tied to one trigger - a plain Dropdown Menu is lighter.
Primary navigation that should always be visible - this is a supplementary, opt-in shortcut, not a nav replacement.

Keyboard

Key	Action
Type	Filters items by label and searchText (normalized: lowercase, punctuation collapsed).
ArrowUp / ArrowDown	Moves the highlighted item across groups.
Enter	Runs the highlighted item's onSelect and closes the menu.
Escape	Closes without running anything.

Mobile behavior

Opens the same way as desktop (via the trigger button; the ⌘K shortcut itself is a desktop-keyboard convenience), and the on-screen keyboard opens immediately since the input is focused on open.
The panel is width-clamped and vertically scrollable so a long, filtered result list doesn't overflow a short viewport.

Accessibility notes

Composed from Dialog under the hood, so it inherits focus trap, Escape-to-close, and focus-return-to-trigger for free.
Items are grouped visually by the group field; each group is exposed as its own labeled region for screen reader users.

Common mistakes

Wiring the ⌘K shortcut listener but forgetting to also expose a visible trigger button - keyboard-shortcut-only entry points are undiscoverable and inaccessible to users who can't use that chord.
Putting hundreds of items in one flat group - use group to organize a long list instead of one long unbroken scroll.

Known limitations

No built-in async/remote data loading - items must already be in memory; filter debouncing for a remote source is left to the consumer.

Related components

Dropdown Menu Combobox

Criterion	Status	Note
Keyboard support	Supported	Type-to-filter, arrow-key highlight across groups, Enter to run, Escape to close.
Focus management	Supported	Inherits Dialog's focus trap and focus-return-to-trigger.
Screen reader labels	Supported	Grouped items are exposed as labeled regions.
Reduced motion	Supported	prefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparency	Supported	prefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layout	Partial	Logical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

API reference

Prop	Type	Default	Description
items *	CommandMenuItem[]	None	Everything searchable. Filtering happens here, not in the consumer.
defaultOpen	boolean	false	Uncontrolled initial open state. Default false. Lets a demo or a ⌘K-only palette skip carrying its own `useState`.
hotkey	string	None	Key toggling the palette with ⌘ or Ctrl (`"k"` = ⌘K/Ctrl+K, no UA sniffing). Off by default. Skips keydowns already `preventDefault()`ed and blocks the browser's own binding.
onOpenChange	((open: boolean) => void)	None	Called whenever the palette opens or closes, including via ⌘K and Escape.
open	boolean	None	Controlled open state. Omit to let the component own it.
placeholder	string	"Type a command or search…"	Text in the search input while it is empty.

items *None

CommandMenuItem[]

Everything searchable. Filtering happens here, not in the consumer.

defaultOpenfalse

boolean

Uncontrolled initial open state. Default false. Lets a demo or a ⌘K-only palette skip carrying its own `useState`.

hotkeyNone

string

Key toggling the palette with ⌘ or Ctrl (`"k"` = ⌘K/Ctrl+K, no UA sniffing). Off by default. Skips keydowns already `preventDefault()`ed and blocks the browser's own binding.

onOpenChangeNone

((open: boolean) => void)

Called whenever the palette opens or closes, including via ⌘K and Escape.

openNone

boolean

Controlled open state. Omit to let the component own it.

placeholder"Type a command or search…"

string

Text in the search input while it is empty.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent