Motion UIComponentsComponent

Command palette

Motion's fuzzy-filtered Cmd+K launcher choreography on Base UI's Dialog primitive, with a sliding selection highlight.

API reference

Components

`<CommandPalette />`

Fuzzy-filtered Cmd+K launcher on Base UI Dialog.

`open?`

boolean

Controlled open state.

`defaultOpen?`

boolean = false

Initial open state when uncontrolled. Defaults to false.

`onOpenChange?`

(open: boolean) => void

Called whenever Base UI requests an open-state change.

`items`

CommandPaletteItem[]

Commands the palette filters and lists.

`groupOrder?`

string[]

Order group headers render in.

`maxListHeight?`

number = 320

Max height of the scrollable result list.

`triggerLabel?`

string = "Search commands, funnels, cohorts…"

Collapsed trigger bar placeholder text.

`triggerShortcut?`

string = "⌘K"

Trigger trailing shortcut badge glyphs.

`inputPlaceholder?`

string = "Type a command or search…"

Open dialog input placeholder.

`inputAriaLabel?`

string = "Search commands"

Open dialog input accessible label.

`dialogLabel?`

string = "Command palette"

Dialog accessible label.

`footerHints?`

CommandFooterHint[] = DEFAULT_FOOTER_HINTS

Footer-strip hints.

`renderEmpty?`

(query: string) => ReactNode = defaultRenderEmpty

Renders the no-results message.

`onSelect?`

(item: CommandPaletteItem) => void

Called when a row is selected.

Hooks

`useCommandK`

Headless open-state engine with global Cmd/Ctrl+K listener.

useCommandK(options: UseCommandKOptions): UseCommandKResult

`defaultOpen?`

boolean = false

Whether the palette starts open. Defaults to false.

`open?`

boolean

Controlled open state.

`onOpenChange?`

(open: boolean) => void

Called whenever the open state changes.

Returns

`open`

boolean

Whether the palette is open.

`setOpen`

(open: boolean) => void

Set the open state directly.

`openPalette`

() => void

Open the palette.

`closePalette`

() => void

Close the palette.

`toggle`

() => void

Toggle the palette (Cmd/Ctrl+K).

Functions

`fuzzyMatch`

Subsequence fuzzy match: every query character must appear in order in target.

fuzzyMatch(query: string, target: string): boolean

`commandMatches`

Whether a command survives the trimmed lower-cased query.

commandMatches(command: CommandPaletteItem, query: string): boolean

`id`

string

`label`

string

`hint?`

string

`group?`

string

`icon?`

ComponentType<{ className?: string; "aria-hidden"?: boolean }>

`shortcut?`

string[]

`keywords?`

string[]

`filterCommandGroups`

Filters items by query and buckets survivors into groups.

filterCommandGroups(items: T[], groupOrder: string[] | undefined, query: string): CommandGroupView<T>[]

`nextCommandIndex`

Wraps listbox keyboard navigation while keeping an empty result set at zero.

nextCommandIndex(currentIndex: number, resultCount: number, direction: "next" | "previous"): number

`commandShortcutPresentation`

Formats shortcut badges for display and screen readers.

commandShortcutPresentation(shortcut: string[]): {
  separator: "→" | "+"
  label: string
}

Featured in

See the command palette composed into full sections.

Navigation: Command paletteAn example of a Cmd+K command palette with a fuzzy-filtered, keyboard-navigable list and a shared-layout selection highlight in Motion for React.