Command

A searchable list for pages and actions.

Overview

CommandInput filters CommandItem values. Arrow keys move the active item. Enter activates it. The docs search dialog uses this list, and the component itself stays free of documentation routes.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add command

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

export function PageSearch() {
  return (
    <Command>
      <CommandInput aria-label="Search pages" placeholder="Search pages" />
      <CommandList>
        <CommandEmpty>No matching pages.</CommandEmpty>
        <CommandGroup heading="Components">
          <CommandItem value="Button">Button</CommandItem>
          <CommandItem value="Input">Input</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Examples

Documentation search

Groups filter as the query changes. Enter activates the highlighted item.

Quick actions

A palette can open settings, a profile, or sign out.

Command palette

Navigation and actions can share one list.

Searchable people

A result can include an avatar and a status badge.

In practice

A workspace search groups projects, people, and settings. Avatars and Badges keep results scannable while the query filters the list.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`value`	string	—	The text CommandItem matches against the query.
`disabled`	boolean	—	Keeps an item visible and skips it with the arrow keys.

Accessibility

The input is a combobox and the list is a listbox.
Items are options. The active item sets aria-activedescendant.
Disabled items stay in the list and are skipped by the arrows.