Command

<Card className="w-[300px] p-0">
  <Command aria-label="Command menu">
    <SearchField aria-label="Search">
      <InputGroup>
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <Input />
      </InputGroup>
    </SearchField>
    <ListBox aria-label="Suggestions" onAction={() => console.log("action")}>
      <ListBoxSection>
        <ListBoxSectionHeader>Suggestions</ListBoxSectionHeader>
        <ListBoxItem textValue="Calendar">
          <CalendarIcon />
          <span>Calendar</span>
        </ListBoxItem>
        <ListBoxItem textValue="Search Emoji">
          <SmileIcon />
          <span>Search Emoji</span>
        </ListBoxItem>
        <ListBoxItem textValue="Calculator">
          <CalculatorIcon />
          <span>Calculator</span>
        </ListBoxItem>
      </ListBoxSection>
    </ListBox>
  </Command>
</Card>

Installation

npx shadcn@latest add @dotui/command

Usage

Command is a thin wrapper around React Aria's Autocomplete. It ships no input or list of its own — you compose it from primitives you already have: a SearchField for the query and a ListBox for the commands. As the user types, the list is filtered down to the items whose text matches the query.

import { SearchIcon } from 'lucide-react'

import { Command } from '@/components/ui/command'
import { Input, InputGroup, InputGroupAddon } from '@/components/ui/input'
import { ListBox, ListBoxItem } from '@/components/ui/list-box'
import { SearchField } from '@/components/ui/search-field'

<Command aria-label="Command menu">
  <SearchField aria-label="Search">
    <InputGroup>
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <Input placeholder="Type a command or search..." />
    </InputGroup>
  </SearchField>
  <ListBox aria-label="Commands" onAction={(key) => console.log(key)}>
    <ListBoxItem textValue="Calendar">Calendar</ListBoxItem>
    <ListBoxItem textValue="Search Emoji">Search Emoji</ListBoxItem>
    <ListBoxItem textValue="Calculator">Calculator</ListBoxItem>
  </ListBox>
</Command>

Filtering matches against each item's textValue. String children set it automatically, but items with rich content — an icon, a keyboard shortcut — need an explicit textValue to stay searchable. Group related commands with ListBoxSection and ListBoxSectionHeader, and respond to a selection with the list's onAction callback.

Because the input and the list are ordinary primitives, anything they support works here too: put the Command inside a Modal for a ⌘K palette, inside a Popover to filter a Select, or swap the ListBox for a TagGroup. See the examples below.

Anatomy

Command re-exports the underlying primitives under Command* aliases so the whole palette imports from one place: CommandInput is a SearchField, CommandContent is a ListBox, and CommandItem, CommandSection, and CommandSectionHeader map to their ListBox* counterparts.

import {
  Command,
  CommandContent,
  CommandInput,
  CommandItem,
  CommandSection,
  CommandSectionHeader,
} from '@/components/ui/command'
;<Command>
  <CommandInput />
  <CommandContent>
    <CommandSection>
      <CommandSectionHeader />
      <CommandItem />
    </CommandSection>
  </CommandContent>
</Command>

Filtering

Matching is case- and punctuation-insensitive by default (sensitivity: 'base', ignorePunctuation: true). Pass filter with any Intl.CollatorOptions to tune it — for example make matching accent-sensitive.

<Command filter={{ sensitivity: 'accent' }}>{/* … */}</Command>

Examples

API Reference

Command renders only the autocomplete wrapper. The input is a SearchField and the list is a ListBox — CommandInput and CommandContent are re-exported aliases for those primitives, so refer to their pages for the full set of props.

Command

CommandInput

CommandContent