# Command Palette

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.

> Composed · Pro · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/command-palette
```

## Import

```tsx
import { CommandPalette } from "@/components/ui/command-palette/command-palette";
```

## Variants

- `actions` — Command menu: `npx @lumioui/cli add pro/command-palette-actions`
- `people` — People picker: `npx @lumioui/cli add pro/command-palette-people`
- `settings` — Inline settings search: `npx @lumioui/cli add pro/command-palette-settings`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `groups` | `CommandGroup[]` | Grouped commands. |
| `presentation?` | `"modal" | "inline"` | "modal" (default) floats over the screen; "inline" renders in place (a search tab, a settings page). |
| `open?` | `boolean` | Controlled open state (modal). |
| `defaultOpen?` | `boolean` | Uncontrolled initial open state (modal). |
| `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) => { 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. |
| `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` | — |

## Icons rendered

- `search` — /icons.html?i=search
- `x` — /icons.html?i=x

Source: https://lumioui.com/components/command-palette