# Command Menu

> A spotlight-style command palette with keyboard navigation and fuzzy search.

<demo-command-menu>



</demo-command-menu>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/command-menu.json"
```

## Usage

```vue
<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>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        CommandItem[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Array of command items to display
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        placeholder
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Type a command or search...'
      </code>
    </td>
    
    <td>
      Placeholder text for search input
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        open
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Controls menu visibility via v-model
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>