Command

Typing filters and ranks the items; the arrow keys move the selection and Enter runs it. The selected row gets the accent surface, plus the focus ring when the keyboard moved it there, as in Dropdown Menu. Focus stays in the input the whole time, so screen readers follow the selection without leaving the field.

Installation

$npx shadcn@latest add @reziui/command

Usage

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

export function Example() {
  return (
    <Command label="Commands">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem onSelect={() => console.log("calendar")}>Calendar</CommandItem>
          <CommandItem>Search emoji</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Give the command a label, which names the list for screen readers. Items match on their text; add keywords for other words that should find them.

Examples

Dialog

CommandDialog puts the command in a Dialog near the top of the screen, with a larger input. Open it from your own shortcut listener; in an app that is usually ⌘K (Ctrl+K elsewhere). This example uses ⌘J because these docs already use ⌘K for search. The dialog has a screen-reader title and description, which you can change with title and description.

Keyboard

API reference