# CommandPalette

> Global search/command palette built on `cmdk`, shown in a modal dialog.

Source: https://ui.jcsoftdev.com/docs/components/command-palette

Global search/command palette built on `cmdk`, shown in a modal dialog.

## Import

```ts
import { CommandPalette } from "@jcsoftdev/ui/palette";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/palette/command-palette`.

## Usage

```tsx
<CommandPalette
  open
  items={items}
  label="Buscar en la barbería"
  placeholder="Buscar clientes, servicios o acciones..."
  emptyLabel="Sin resultados"
  closeKeyLabel="Esc"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` * | `boolean` |  |  |
| `onClose` * | `() => void` |  |  |
| `items` * | `CommandPaletteItem[]` |  |  |
| `label` * | `string` |  | Accessible name of the dialog. |
| `placeholder` * | `string` |  |  |
| `emptyLabel` * | `string` |  | Text shown when nothing matches. |
| `formatResultCount` * | `(count: number) => string` |  | Screen-reader announcement of the result count, e.g. `(n) => \`${n} results\``. |
| `closeKeyLabel` | `string` | `"Esc"` | Hint for the close key shown next to the input. |
| `query` | `string` |  | Controlled query, so the parent can react to typing (e.g. debounced remote search). |
| `onQueryChange` | `((query: string) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/palette-commandpalette--default)
- [Empty](/storybook/?path=/story/palette-commandpalette--empty)
- [Custom Close Key](/storybook/?path=/story/palette-commandpalette--custom-close-key)
- [Controlled Query](/storybook/?path=/story/palette-commandpalette--controlled-query)

## Source

`packages/ui/src/palette/command-palette/command-palette.tsx`