A spotlight-style command palette with keyboard navigation and fuzzy search.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/command-menu.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import CommandMenu from '~/components/ui/command-menu/CommandMenu.vue';
const open = ref(false);
const items = [
{ label: 'Home', icon: 'lucide:home', group: 'Pages' },
{ label: 'About', icon: 'lucide:file-text', group: 'Pages' },
{ label: 'Profile', icon: 'lucide:user', group: 'Settings' },
{ label: 'Settings', icon: 'lucide:settings', group: 'Settings' },
];
</script>
<template>
<button @click="open = true">Open Command Menu</button>
<CommandMenu v-model:open="open" :items="items" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
items | CommandItem[] | [] | Array of command items to display |
placeholder | string | 'Type a command or search...' | Placeholder text for search input |
open | boolean | false | Controls menu visibility via v-model |
class | string | '' | Additional CSS classes for styling |