Command

Use a command menu when a workspace has enough destinations and actions that search is faster than navigation. Keep ordinary navigation available; the command menu is an accelerator.

Open command menu⌘ K

No command selected

Show codeCopy

Import

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

Composition

CommandDialog supplies the modal semantics and searchable Command root. Group related results, include CommandEmpty, and use onSelect for keyboard and pointer activation. The built-in filtering matches item text; set value on an item when its searchable value differs from its visible label.

For a persistent command list inside another surface, compose Command, CommandInput, and CommandList directly instead of nesting another dialog.

Accessibility

Give the dialog a task-specific title and description when the defaults do not fit. Focus the search input when the menu opens, keep item labels explicit, and return focus to the opener on close. Announce the result when an action changes local state.

Best practices

• Put the most frequent actions first and separate navigation from mutation.
• Show shortcuts only when the application actually implements them.
• Ask for confirmation before destructive commands.