Navigation

Command palette

The ⌘K palette: a search box over a flat list of commands.

Client componentSource

Import

import { CommandPalette } from '@the_viveksingh/vivek-ui'

Ctrl+K search

A modal combobox: the hotkey is bound for you, filtering is over label plus keywords, and arrows move aria-activedescendant rather than DOM focus, so the query box keeps the caret.

Or press Ctrl K

const [open, setOpen] = useState(false)

<CommandPalette
  open={open}
  onOpenChange={setOpen}
  placeholder="Search components, charts and pages"
  items={[
    {
      heading: 'Navigate',
      items: [
        { id: 'overview', label: 'Overview', keywords: ['start', 'install'] },
        { id: 'button', label: 'Button', description: 'Component' },
      ],
    },
    {
      heading: 'Actions',
      items: [
        { id: 'theme', label: 'Toggle dark mode', shortcut: 'T' },
        { id: 'copy', label: 'Copy install command', shortcut: 'C' },
      ],
    },
  ]}
  onSelect={(item) => run(item.id)}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for CommandPalette
PropTypeDefaultDescription
openboolean—Controlled open state.
defaultOpenboolean—Initial open state while uncontrolled. Default `false`.
onOpenChange(open: boolean) => void——
itemsReadonlyArray<CommandPaletteEntry>—Commands, grouped or loose.
placeholderstring——
onSelect(item: CommandPaletteItem) => void—Called with the chosen command. The palette closes afterwards.
emptyStateReactNode—Shown when nothing matches. Default `"No results found."`.
hotkeystring | null—Global shortcut that toggles the palette. `mod` resolves to Command on Apple platforms and Control elsewhere. `null` turns the listener off. Default `'mod+k'`.
querystring—Controlled search text.
defaultQuerystring—Initial search text while uncontrolled. Default `''`.
onQueryChange(query: string) => void——
filter(item: CommandPaletteItem, query: string) => boolean—Replaces the built-in matcher — pass one that always returns `true` for async search.
labelstring—Accessible name for the dialog and the search box. Default `"Command palette"`.
resultsLabelstring—Accessible name for the results list. Default `"Results"`.
sizeModalSize—Dialog width. Default `lg`.
containerPortalContainer—Portal mount point. Defaults to `document.body`.
footerReactNode—A hint bar under the results — key legends, a count.
idstring—Id root for the combobox/listbox/option wiring. Generated when omitted.
classNamestring——

Rendering