Command

A searchable command list for quickly finding and running application actions.

Use Command for a compact action index with keyboard navigation and filtering. Use CommandDialog when the list should open as a global palette.

Inline command list

Installation

$npx shadcn@latest add @patchui/command

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/command.tsx.

Usage

const commands = ["New file", "Open file", "Save file"];

<Command items={commands}>
  <CommandInput placeholder="Search commands" />
  <CommandList>
    <CommandEmpty>No commands found.</CommandEmpty>
    <CommandCollection>
      {(command) => (
        <CommandItem key={command} value={command}>
          {command}
        </CommandItem>
      )}
    </CommandCollection>
  </CommandList>
</Command>

Pass items for built-in filtering. Pass filteredItems when an external search index owns matching and ranking.

Composition

Command or CommandDialog
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandSection
    │   └── CommandItem
    ├── CommandCollection
    └── CommandSeparator

Examples

Dialog palette

CommandDialog provides the modal surface and dismissal behavior. The application owns the trigger and any global keyboard shortcut.

Dialog palette

API reference

Prop	Type	Default	Description
CommandInput.action	ReactNode	-	Adds trailing content. The consumer wires any interaction.
CommandList.density	"compact" \| "comfortable"	"comfortable"	Selects dense or larger result rows.
CommandItem.selected	boolean	false	Displays a trailing check without changing filtering or highlight state.
CommandItem.description	ReactNode	-	Adds a secondary line below the item label.

Command and CommandDialog otherwise expose the underlying Autocomplete state. Use items for built-in filtering, filteredItems for external results, and open with onOpenChange to control the dialog.

Keyboard behavior

Typing filters the supplied items. No result is highlighted automatically.
Arrow Down or Arrow Up establishes and moves the highlighted result.
Enter selects the highlighted result.
Escape dismisses CommandDialog. The application must register shortcuts such as Command K or Control K to open it.
CommandItem selected marks persistent application state and is separate from the temporary keyboard highlight.

Mobile behavior

CommandDialog stays centered with narrow viewport gutters and caps its result height. The modal branch locks body scrolling while open.