Docs › Components › Command

Shadcn Command

The shadcn/ui Command menu is a fast, searchable list of commands and links, styled with Tailwind CSS v4 and built on cmdk. It filters as you type and is fully keyboard-driven, making it ideal for a command palette. Command menus power global search and quick actions across ShadcnStore blocks.

Key features

• Type-to-filter search over commands and links.
• Groups, headings, separators, and keyboard shortcuts.
• Full keyboard navigation and selection.
• Opens inline or as a CommandDialog palette.
• Built on cmdk.

Installation

npx shadcn@latest add command

Usage

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

export function Example() {
  return (
    <Command>
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Command palette dialog

Bind CommandDialog to a shortcut such as Cmd/Ctrl + K to build an app-wide command palette. Press the shortcut or the button below.

import { CommandDialog } from "@/components/ui/command"

const [open, setOpen] = useState(false)

useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      setOpen((o) => !o)
    }
  }
  document.addEventListener("keydown", down)
  return () => document.removeEventListener("keydown", down)
}, [])

<CommandDialog open={open} onOpenChange={setOpen}>…</CommandDialog>

Anatomy

Part	Purpose
Command	Root that filters items.
CommandInput	The search field.
CommandList	Scrollable results container.
CommandGroup	A titled group of items.
CommandItem	A selectable command or link.
CommandEmpty	Shown when nothing matches.

Accessibility

• The input drives an accessible listbox; keep item labels clear and unique.
• Arrow keys move through results and Enter selects; preserve these bindings.
• Announce the palette shortcut somewhere visible so keyboard users can find it.

When to use the Command

Use the Command menu for fast search and actions across an app: a global command palette, a searchable action list, or an autocomplete of commands. For picking a value in a form, use a Combobox or Select. For a short list of row actions, use a Dropdown Menu.

Used in these blocks

• App shells: global command palette.
• Datatables: quick search and actions.
• Apps: in-app search.

Related components

The Command menu powers a Combobox when placed in a Popover, and opens as a palette via the Dialog. For value selection use a Select; for row actions use a Dropdown Menu.

FAQ

What is the shadcn command menu used for?

The Command menu is a fast, searchable list of commands and links, often opened as a command palette with a keyboard shortcut.

Does the shadcn command use cmdk?

Yes. The Command component is built on cmdk, which provides the filtering, keyboard navigation, and grouping.

How do I open the command menu in a dialog?

Use CommandDialog and toggle its open state, commonly bound to a keyboard shortcut such as Cmd or Ctrl + K.

How do I build a combobox from Command?

Put a Command inside a Popover and use the selected item to update a trigger button. See the Combobox page.