CommandPalette

Searchable command launcher modal with keyboard shortcut hints. The size prop (xs, sm, md, lg, xl) sets the palette width (xs 400px to xl 720px).

Jump to API reference

Import

Vue

import { UiCommandPalette } from '@ziyarago/ui/vue'

Default

Vue

<UiCommandPalette
  placeholder="Search commands"
  :commands="[{ id: 'new', label: 'New booking', icon: 'plus', shortcut: 'N' }, { id: 'guests', label: 'Open guests', icon: 'users', keywords: 'people' }, { id: 'rooms', label: 'Room calendar', icon: 'calendar' }, { id: 'settings', label: 'Settings', icon: 'settings', shortcut: ',' }]"
  :open="open"
  @close="open = false"
 />

Sizes

Vue

<UiCommandPalette
  size="lg"
  placeholder="Search commands"
  :commands="[{ id: 'new', label: 'New booking', icon: 'plus', shortcut: 'N' }, { id: 'guests', label: 'Open guests', icon: 'users' }]"
  :open="open"
  @close="open = false"
 />

API reference

Searchable list of commands in a top-aligned dialog; use for a Cmd+K launcher.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the palette when true; renders nothing when false.

commands{ id: string; label: string; icon?: string; shortcut?: string; keywords?: string }[]'[]'Commands. Filtering is a case-insensitive substring match on label plus keywords.

placeholderstring'Type a command…'Search input placeholder.

sizexssmmdlgxl'md'Scale of dialog max width (400 to 720 px).

Events

Vue: @name. React: onName.

runCalled with the command id on click or Enter; the palette then requests close.

closeCalled on a scrim click, the Escape key and after a command runs.

Notes

Keyboard: ArrowDown/ArrowUp move the active command (wraps around, aria-selected), Enter runs it, Escape closes. The active item resets to the first one when the query changes.
The input receives focus on open and Tab stays inside the dialog. There is no global hotkey; bind Cmd+K yourself.