PxCommandPalette

A command palette / Spotlight-style universal search dialog accessible with Ctrl + K (or Cmd + K on macOS). Provides instant search, grouped actions, keyboard navigation, and keyboard shortcut indicators.

Basic Usage

Click the button below or press Ctrl + K anywhere on this page to test it.

Command Palette

<script setup lang="ts">
import { ref } from 'vue'
import { PxCommandPalette, type CommandItem } from 'praxis-vue-ui'

const isOpen = ref(false)

const commands: CommandItem[] = [
  {
    id: 'dashboard',
    title: 'Dashboard Principal',
    subtitle: 'Métricas, KPIs y resumen operativo',
    group: 'Navegación',
    shortcut: ['G', 'D'],
    perform: () => console.log('Ir a Dashboard')
  },
  {
    id: 'new-user',
    title: 'Crear Nuevo Usuario',
    group: 'Acciones Rápidas',
    shortcut: ['N', 'U'],
    badge: 'Admin',
    perform: () => console.log('Crear usuario')
  }
]
</script>

<template>
  <!-- Trigger button (or activate with Ctrl+K / Cmd+K) -->
  <button @click="isOpen = true">
    Buscar (Ctrl + K)
  </button>

  <PxCommandPalette
    v-model="isOpen"
    :commands="commands"
    @select="(cmd) => console.log('Seleccionado:', cmd)"
  />
</template>

API Reference

Prop	Type	Default	Description
modelValue	boolean	false	—
commands	CommandItem[]	() => []	—
placeholder	string	"Escribe un comando o busca..."	—
emptyText	string	"No se encontraron resultados"	—
disableShortcut	boolean	false	—
shortcutKey	string	"k"	—
maxHeight	string	"max-h-80"	—
closeOnSelect	boolean	true	—

CommandItem Interface

interface CommandItem {
  id: string | number
  title: string
  subtitle?: string
  group?: string          // Categorizes commands into sections
  icon?: Component        // Icon component (e.g. Lucide)
  badge?: string          // Small tag displayed next to title
  shortcut?: string[]     // Visual shortcut hints (e.g. ['Ctrl', 'P'])
  keywords?: string[]     // Additional search terms
  disabled?: boolean
  perform?: (item: CommandItem) => void
}