Command

When to use

Command is for keyboard-first search across actions, records, or navigation targets, either inline as in the demo or wrapped in CommandDialog as a palette. To pick a value inside a form use Combobox, and for a short fixed list use Select.

Platform notes

cmdk filters on rendered text, so under react-i18next it only matches the active locale; add a translated keywords list per item when users type English terms in a non-English UI. CommandEmpty is the mandatory empty state and its text is a translation message, as is the input placeholder, and the vendored file exports no loading wrapper, so a remote-backed palette renders its own skeleton and error rows inside CommandList. CommandDialog defaults title to Command Palette and description to Search for a command to run..., both hardcoded English and both the dialog's accessible name, so pass translated values in. Keep the palette shell in shared/ui and let each slice contribute its own item list, so the search surface does not accumulate knowledge of every domain.

Install

npx shadcn@latest add command

Code

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

export function CommandDemo() {
  return (
    <Command className="max-w-md rounded-lg border">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Tokens</CommandItem>
          <CommandItem>Components</CommandItem>
          <CommandItem>Examples</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Docs">
          <CommandItem>Architecture</CommandItem>
          <CommandItem>Design guidelines</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Full API

ui.shadcn.com/docs/components/command