Command

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/command

UsageCopy Anchor Link

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

<CommandDialog onOpenChange={setOpen} open={open}>
  <CommandInput placeholder="Search commands…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Session">
      <CommandItem keywords={["record"]} onSelect={startRecording}>
        <RecordIcon />
        Start recording
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

CommandDialog wraps its children in Command itself: every cmdk part reads the store Command provides, and one rendered outside it crashes on its first render. Command paints no surface of its own. In a dialog or a popover it stays transparent, and inline it needs a surface around it.

AnatomyCopy Anchor Link

<CommandDialog>
  <CommandInput />
  <CommandList>
    <CommandEmpty />
    <CommandGroup>
      <CommandItem>
        <CommandShortcut />
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
  </CommandList>
  <CommandFooter />
</CommandDialog>

ExamplesCopy Anchor Link

PaletteCopy Anchor Link

The ⌘K palette: a lg dialog in the upper part of the window. value and onValueChange are the selected item, so the CommandFooter can name the action Enter runs.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

The input is a combobox and the list a listbox; the selection is announced as it moves. CommandDialog carries a visually hidden title ("Search") and description. Give CommandInput an aria-label when its placeholder is the only label in view.

API referenceCopy Anchor Link

Every cmdk prop, plus:

CommandDialogCopy Anchor Link

Every Base UI Dialog root prop, plus: