Command

Keyboard-first command palette: a searchable list of actions/destinations users filter by typing. Built on cmdk — handles fuzzy filtering, keyboard nav, and selection. Reach for this when there are many actions to surface in one searchable overlay (a ⌘K menu, quick-jump, action runner). For a short fixed list of contextual actions use DropdownMenu; to pick one value into a form field use Combobox. Render a bare Command inline (e.g. inside a Popover), or wrap it in CommandDialog for a centered ⌘K modal that dims the page.

Basic

<Command className="border border-border shadow-overlay">
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>

    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search emoji</CommandItem>
      <CommandItem>Find a file</CommandItem>
    </CommandGroup>

    <CommandSeparator />

    <CommandGroup heading="Settings">
      <CommandItem>
        Profile
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        Billing
        <CommandShortcut>⌘B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        Settings
        <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Exports

Export	Role
Command	Root.
CommandInput	Search input with leading icon.
CommandList	Scroll container (max-h 300px).
CommandEmpty	Fallback when filter yields nothing.
CommandGroup	Titled section. Pass `heading`.
CommandSeparator	Divider.
CommandItem	A row. Filters + keyboard nav via cmdk.
CommandShortcut	Keyboard-hint text.

Source

packages/react/src/components/command.tsx