MiHCM
overlay/@mihcm/ui·v0.21.0·stable

Command

Command palette (⌘K) powered by cmdk. Composable search + item groups + keyboard navigation.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

  • Command palette (⌘K) — global search and action launcher in a dialog overlay.
  • Inline search — filterable list embedded directly in the page (e.g. sidebar search, settings filter).
  • Combobox replacement — when a searchable dropdown needs grouped items and keyboard navigation.

When NOT to use

  • Simple dropdown with fewer than 10 static items → use Select.
  • Full-text search with server-side results → use a search input with debounced fetch.

Anatomy

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem>Dashboard</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Dialog mode

Wrap in CommandDialog for a ⌘K overlay.

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command..." />
  <CommandList>...</CommandList>
</CommandDialog>

Sub-components

ComponentPurpose
CommandRoot — filterable container.
CommandDialogDialog-mounted variant.
CommandInputSearch input with icon.
CommandListScrollable results container.
CommandEmptyShown when filter matches nothing.
CommandGroupLabelled group of items.
CommandItemSelectable result.
CommandSeparatorVisual divider between groups.
CommandShortcutRight-aligned shortcut hint inside an item.

Composition

  • Use CommandDialog for a Cmd+K command palette. It wraps Command in a Dialog.
  • Group related items with CommandGroup and label each group.
  • CommandEmpty renders when the filter matches nothing — use it for a "No results" message.
  • CommandShortcut renders keyboard shortcut hints right-aligned inside an item.
  • Dialog — used internally by CommandDialog.
  • Combobox — searchable dropdown for form fields.
  • SearchField — standalone search input.