CommandMenu

CommandMenu is a Cmd+K command palette overlay with fuzzy search, keyboard navigation, and group support.

ExamplesCodeUsageChangelog

Basic usage

Press Cmd+K (or Ctrl+K on Windows/Linux) anywhere on this page to open the demo palette, or click the button below.

Tailwind v4

<script setup>
import { ref } from 'vue'

const open = ref(false)

const items = [
  {
    id: 'new-file',
    label: 'New File',
    description: 'Create a new file',
    icon: '📄',
    group: 'File',
    shortcut: ['⌘', 'N'],
    action: () => createFile(),
  },
  {
    id: 'settings',
    label: 'Settings',
    group: 'App',
    action: () => openSettings(),
  },
]
</script>

<Button @click="open = true">Open Command Menu</Button>
<CommandMenu v-model="open" :items="items" />

Props

Prop	Type	Default	Description
modelValue	boolean	false	Controls open state (use with v-model)
placeholder	string	'Search commands…'	Search input placeholder
items	CommandItem[]	[]	List of command items

CommandItem interface

interface CommandItem {
  id: string
  label: string
  description?: string
  icon?: string
  group?: string
  shortcut?: string[]
  action: () => void
}

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when open state changes

Keyboard shortcuts

Key	Action
Cmd+K / Ctrl+K	Toggle menu
↑ / ↓	Navigate items
Enter	Execute selected item
Escape	Close menu