Commands

Usage and anatomy

Command combines a modal command palette with searchable groups and actions. Use <Command.Root /> for dialog state, <Command.Content /> for the modal surface, and <Command.Command /> for the searchable command collection.

import * as Command from "@acme/ui/command"

<Command.Root open={open} onOpenChange={setOpen}>
  <Command.Content>
    <Command.Command>
      <Command.Input placeholder="Search commands..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Actions">
          <Command.Item>
            <Command.ItemLabel>Create project</Command.ItemLabel>
            <Command.ItemShortcut>⌘N</Command.ItemShortcut>
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command.Command>
  </Command.Content>
</Command.Root>

• Give every command a concise label and use groups to organize longer result sets.
• Include Command.Empty so searches with no results still provide clear feedback.
• Wire keyboard shortcuts in the application and display them with Command.ItemShortcut.

API reference

Command.Root and Command.Content

Command.Root accepts Radix Dialog root props. Command.Command and its Input, List, Empty, Group, Item, and Separator parts accept the corresponding cmdk props.