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.

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