Command Palette

Overlay

A ⌘K search modal for quick navigation and actions. Keyboard-navigable with grouped results.

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	—	Open state (v-model).
`items`	`DsCommandItem[]`	—	Array of command items with id, label, description?, shortcut?, group?, action().
`placeholder`	`string`	`'Search commands…'`	Search input placeholder.

Examples

Demo

vue

<script setup lang="ts">
const open = ref(false)
const items = [
  { id: '1', label: 'Dashboard', shortcut: '⌘D', group: 'Navigation', action: () => navigateTo('/') },
  { id: '2', label: 'Toggle theme', shortcut: '⌘T', group: 'Actions', action: toggleTheme },
]
</script>
<template>
  <DsButton @click="open = true">Open palette  <DsKbd size="sm">⌘K</DsKbd></DsButton>
  <DsCommandPalette v-model="open" :items="items" />
</template>

Accessibility

role="dialog" with aria-modal and aria-label.
Arrow keys navigate items, Enter selects, Escape closes.
Active item is visually highlighted.

Drawer

Context Menu