Command

Command palette pattern. Composable input + grouped item list with fuzzy search. CommandDialog wraps it in a modal for global ⌘K menus.

Default

Inline command palette anchored to its container.

Usage

Import the parts you need from the component's folder.

import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

Basic

A simple command menu in a dialog.

Shortcuts

CommandShortcut right-aligns a keyboard hint inside each item.

Groups

A command menu with groups, icons and separators.

Scrollable

A long list scrolls inside CommandList while the input stays pinned.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
</script>

<template>
  <Command>
    <CommandInput />
    <CommandList>
      <CommandEmpty />
      <CommandGroup>
        <CommandItem />
        <CommandItem />
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup>
        <CommandItem />
        <CommandItem />
      </CommandGroup>
    </CommandList>
  </Command>
</template>

API Reference

Command

Prop	Type	Default	Description
`modelValue`	`string`	—	Selected item value. Supports v-model.
`filter`	`(value, search) => number`	`fuzzy`	Custom match scorer.

Event	Description
`update:modelValue`	Fires when the highlighted/selected value changes.

CommandDialog

Prop	Type	Default	Description
`open`	`boolean`	—	Dialog open state. Supports v-model:open. Wrap the contents in a Command.
`title`	`string`	`"Command Palette"`	Accessible dialog title (visually hidden).
`description`	`string`	`"Search for a command to run..."`	Accessible dialog description (visually hidden).
`showCloseButton`	`boolean`	`false`	Show the dialog close (×) button.

Event	Description
`update:open`	Fires when the dialog opens or closes.

CommandInput

Prop	Type	Default	Description
`modelValue`	`string`	—	Search query. Supports v-model.
`placeholder`	`string`	—	Placeholder text for the search field.

CommandItem

Prop	Type	Default	Description
`value`	`string`	—	Value used for filtering and selection.
`disabled`	`boolean`	`false`	Block selection of this item.

Event	Description
`select`	Fires when the item is chosen via click or Enter.

CommandGroup / CommandEmpty

Prop	Type	Default	Description
`heading`	`string`	—	(CommandGroup) Section heading. CommandEmpty renders when no item matches.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`A`	Typing in the input filters the item list.
`↑`	Moves the highlight to the previous item.
`↓`	Moves the highlight to the next item.
`Enter`	Selects the highlighted item.
`Esc`	Closes the palette when shown in a dialog.

Follows the combobox/listbox pattern: a textbox input controls a role=listbox of items.
aria-activedescendant tracks the highlighted item while DOM focus stays on the input.

Alert Dialog Context Menu