Command Palette

Pro

Search launcher for actions and destinations with forgiving matching, highlighted letters and keyboard shortcuts. Results refresh as you type, and the chosen row confirms before the panel closes.

Preview

Installation

npx @lumioui/cli add pro/command-palette

Usage

import { CommandPalette } from "@/components/ui/command-palette/command-palette";
<CommandPalette />

Examples

Command menu

⌘K in an issue tracker.

People picker

The "New message" search in a messaging app, inline.

Inline settings search

Search inside a phone's Settings, inline at the top of the page.

API reference

Prop Type Default
groups* CommandGroup[]

Grouped commands.

 —
presentation "modal" | "inline"

"modal" (default) floats over the screen; "inline" renders in place (a search tab, a settings page).

 "modal"
open boolean

Controlled open state (modal).

 —
defaultOpen boolean

Uncontrolled initial open state (modal).

 false
onOpenChange (open: boolean) => void —
query string

Controlled query.

 —
defaultQuery string

Uncontrolled initial query.

 —
onQueryChange (query: string) => void —
placeholder string

Field placeholder. Default "Search or type a command".

 —
filter
(item: CommandItem, query: string) … (item: CommandItem, query: string) => { score: number

Custom ranking — return null to hide an item.

 —
hits number[] } | null —
onSelect (item: CommandItem) => void

Fires for every run, after the item's own onSelect.

 —
closeOnSelect boolean

Close after running a command (modal). Default true.

 true
loading boolean

Show the spinner in the field — results are loading.

 —
emptyMessage string

Empty-state line. Default No results for "<query>".

 —
showHints boolean

Show ↑↓ / ↵ / esc hints under the list. Default true on web.

 —
maxListHeight number

Max list height before it scrolls. Default 400.

 —
autoFocus boolean

Focus the field when shown. Default true for modal, false inline.

 —
className string —