Command

Fast, composable, unstyled command menu for React.

Basic Command Menu

Command Dialog

Press ⌘K or click the button to open.

Usage

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

{/* Inline command */}
<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem>
        <Icon className="mr-2 h-4 w-4" />
        Action
        <CommandShortcut>⌘K</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

{/* Dialog with keyboard shortcut */}
React.useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      setOpen((open) => !open)
    }
  }
  document.addEventListener("keydown", down)
  return () => document.removeEventListener("keydown", down)
}, [])

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

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/command.md and shipped inside the published @gradeui/ui tarball.

---
name: Command
import: "@gradeui/ui"
subcomponents: [CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, CommandDialog]
props:
  - Command: value?: string — controlled active item value
  - Command: onValueChange?: (value: string) => void
  - CommandInput: placeholder?: string
  - CommandList: children: React.ReactNode — wraps groups and empty state
  - CommandEmpty: children: React.ReactNode — fallback when no items match
  - CommandGroup: heading?: string
  - CommandItem: value?: string — used for filter matching and selection emit
  - CommandItem: onSelect?: (value: string) => void
  - CommandItem: disabled?: boolean
  - CommandShortcut: children: React.ReactNode — right-aligned keyboard hint (⌘K, ⌥F)
  - CommandDialog: open, onOpenChange — when you want the command palette mounted in a modal (cmd+k pattern)
when_to_use: A searchable list of actions or destinations — global ⌘K palettes, "jump to" inputs, account switchers with filter. Wrap in CommandDialog when it should pop over the entire app on a hotkey. For straight forms with filter, prefer a Select with a search input. For free-text autocomplete tied to a single value, prefer Combobox built on Popover + Command.
composes_with: [Dialog (CommandDialog wraps it), Popover (inline combobox), Tooltip]
aliases: [command palette, command menu, cmd k, quick switcher, action menu, spotlight, spotlight search, quick open, fuzzy finder]
---

```jsx
// Global ⌘K palette — toggled with a keydown listener at the app root.
<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Navigate">
      <CommandItem onSelect={() => router.push("/docs")}>
        <Book /> Docs <CommandShortcut>⌘D</CommandShortcut>
      </CommandItem>
      <CommandItem onSelect={() => router.push("/studio")}>
        <Sparkles /> Studio <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>
```

Sidebar

Dropdown Menu