Components

Command

Command palette (cmdk) with search, groups, items, shortcuts, and an empty state. Compose with CommandDialog for a ⌘K-style modal launcher, or drop a bordered Command inline.

Updated Jul 18, 2026 by Juan Pablo Turina

Anatomy

1
Input
CommandInput: a MagnifyingGlass + a search field (h-12, border-b) that filters the list as you type (cmdk).
2
Group + heading
CommandGroup wraps items under a sentence-case caption (text-xs medium muted). Separate groups with CommandSeparator.
3
Item
CommandItem: a selectable row (rounded-md, hover bg-muted). Optional leading icon; supports disabled + selected.
4
Shortcut
CommandShortcut: a muted keyboard hint (e.g. ⌘P) pinned to the right of an item.
5
Empty state
CommandEmpty: a centered 'No results found.' shown when the query matches nothing.

Command palette (⌘K)

Wrap a Command in CommandDialog for a modal launcher opened by a keyboard shortcut or a button.

or press ⌘K / Ctrl+K

const [open, setOpen] = React.useState(false);

// ⌘K / Ctrl+K toggles the palette
React.useEffect(() => {
  const down = (e) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      setOpen((v) => !v);
    }
  };
  document.addEventListener("keydown", down);
  return () => document.removeEventListener("keydown", down);
}, []);

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command or search" />
  <CommandList>{/* groups + items */}</CommandList>
</CommandDialog>

Inline

Drop a bordered Command straight into the page (e.g. inside a Popover) when you don't need a modal.

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="Type a command or search" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <Plus weight="light" />
        Create rule
        <CommandShortcut>⌘R</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Import

Copy this import line at the top of the file where you compose this atom.

cmdk under the hood. Use Command inline, or CommandDialog for a modal ⌘K launcher.

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

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
Command	cmdk Root	—	The container. Filters items by the input value. Style with rounded-lg + border + shadow-md when inline.
CommandDialog	Command + Dialog	—	Wraps Command in a modal. Props: open, onOpenChange. Pair with a ⌘K key listener.
CommandInput	cmdk Input	—	Search field (h-12, MagnifyingGlass, border-b). placeholder sets the prompt.
CommandList	cmdk List	—	Scroll container (max-h-72). Holds groups, items, empty, separators.
CommandEmpty	cmdk Empty	—	Shown when the query matches nothing. Put your 'No results' copy here.
CommandGroup	cmdk Group	—	Groups items under a sentence-case heading (prop: heading).
CommandItem	cmdk Item	—	A selectable row. onSelect handler; disabled prop; optional leading icon.
CommandShortcut	span	—	Muted keyboard hint pinned to the right of an item (ml-auto).
CommandSeparator	cmdk Separator	—	A 1px divider between groups.

When to use

⌘K launcher for the whole app.
Autocomplete field for a big filterable list.
Any searchable list of commands or records.

When not to use

Small dropdown menus — use DropdownMenu.
Structural navigation — use Sidebar.
A single searchable select in a form — use Combobox.

Usage

Group commands with clear headings.
Provide keyboard shortcuts on high-frequency commands.
Keep the empty state helpful.

Don't

Don't nest palettes.
Don't hide the search input.
Don't use uppercase group headings — the Command uses sentence-case captions.

Cross-links to atoms and patterns you may reach for next.

ComboboxThe Command wrapped in a Popover as a searchable select.
DialogCommandDialog is a Command inside this modal.
Dropdown menuFor a small fixed menu instead of a searchable palette.