CommandPalette

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

Import

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

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

Usage

<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
• Empty
• Custom Close Key
• Controlled Query

Source

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