Command

shadcn/ui

Searchable command palette. Use inline or in a dialog (Cmd+K). Foundation of Combobox.

@/components/ui/command

CommandDialog — Cmd+K palette

// Wire keyboard shortcut:
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)
}, [])

Inline — embedded in page

Inline: wrap in border rounded-lg. Filters in real-time via built-in cmdk filtering.

Sub-components

Component	Role
Command	Root container — handles filtering state
CommandDialog	Command wrapped in a Dialog for Cmd+K palettes
CommandInput	Search input — drives real-time filtering automatically
CommandList	Scrollable results container
CommandEmpty	Shown when no results match — always include
CommandGroup	Named section with a heading label
CommandItem	Selectable result row — use onSelect for actions
CommandSeparator	Horizontal divider between groups
CommandShortcut	Right-aligned keyboard shortcut label (⌘K)

Tokens: bg-popover text-popover-foreground — selected item: bg-accent text-accent-foreground

Command vs Combobox

	Command	Combobox
Purpose	Global actions + navigation (multi-type)	Single-field value picker
Output	Triggers an action (navigate, execute)	Selects a value (stored in form)
Use for	Cmd+K palette, advanced search	Assignee, partner, status picker in forms

On this page