ICommandPalette ​

Every command in the app behind one shortcut. It opens on CtrlK, filters as you type, and is driven entirely by keyboard.

<script setup lang="ts">
const open = ref(false)

const commands = [
  {
    label: 'Navigation',
    items: [
      { label: 'Invoices', icon: Invoice01Icon, shortcut: 'g i', keywords: ['billing'], onSelect: () => router.push('/invoices') },
      { label: 'Clients', icon: UserGroupIcon, shortcut: 'g c', onSelect: () => router.push('/clients') },
    ],
  },
  {
    label: 'Actions',
    items: [
      { label: 'Create invoice', icon: PlusSignIcon, shortcut: 'mod n', onSelect: create },
    ],
  },
]
</script>

<template>
  <IButton variant="outline" @click="open = true">
    Open the palette
  </IButton>

  <ICommandPalette
    v-model:open="open"
    :items="commands"
    placeholder="Search commands…"
  />
</template>

Type bill in the palette above and Invoices survives: keywords adds search terms that never appear on screen, such as synonyms or a page's former name.

Flat commands ​

Groups are optional. A bare array is a single list, and entries written before or between groups keep their position.

<ICommandPalette
  v-model:open="open"
  :footer="false"
  :items="[
    { label: 'Go to overview', onSelect: () => router.push('/') },
    { label: 'Go to invoices', onSelect: () => router.push('/invoices') },
    { label: 'Go to clients', onSelect: () => router.push('/clients') },
    { label: 'Open settings', onSelect: () => router.push('/settings') },
  ]"
/>

The shortcut that opens it ​

hotkey defaults to mod+k, where mod is Command on Apple platforms and Control everywhere else. It is bound on the window, so it works wherever focus is.

<ICommandPalette v-model:open="open" :items="commands" hotkey="mod+shift+p" />

<!-- Bind nothing; drive `open` yourself -->
<ICommandPalette v-model:open="open" :items="commands" :hotkey="null" />

The demos on this page pass :hotkey="null" so they cannot fight the site's own palette. Press CtrlK anywhere on these docs to see the real one.

Recent commands ​

recent-key makes the palette remember the commands a reader picks and list the latest ones first, under "Recent", while the search is empty. They're stored in localStorage under that key, so give each palette its own.

<ICommandPalette :items="commands" recent-key="app-command-palette" />

Shortcuts on a row ​

shortcut is display only — bind the chord yourself, where the command lives. Write it as spaced keys and each is rendered as its own kbd: mod n, g i, ⇧ ⌘ P.

Disabled commands ​

A command with disabled still appears, struck through and carrying aria-disabled, but cannot be chosen and is skipped by the arrow keys. That is Archive invoice in the first palette on this page.

Links ​

Give a command an href and its row renders as an <a>, so middle-click, Ctrl-click and "open in new tab" all work. onSelect still fires for a plain click.

const command = { label: 'Documentation', href: '/docs', onSelect: () => track('help') }

Props ​

v-model:open controls it. Nothing is rendered while it is closed.

Events and slots ​

Item shapes ​

interface CommandItem {
  label: string
  /** Stable identity for the recent list; defaults to group and label. */
  id?: string
  icon?: IconLike
  /** Display only, split on spaces into separate keys. */
  shortcut?: string
  /** Extra search terms that never appear on screen. */
  keywords?: string[]
  href?: string
  disabled?: boolean
  onSelect?: () => void
}

interface CommandGroup {
  label: string
  items: CommandItem[]
}

A group whose commands all fail the filter is dropped, heading included.

The panel sits at 12vh rather than centred, so the field stays put as the list grows and shrinks.