Command

Composable command menu built on cmdk — search input + filtered list with keyboard navigation. Use as an inline palette or, wrapped in CommandDialog, as a ⌘K-style launcher.

Installation

pnpm

pnpm dlx @hex-core/cli add command

Inline command palette

Embed Command directly (no Dialog) as an in-page search surface — useful for settings search or a sidebar filter

tsx

<Command className="rounded-lg border shadow-sm">
  <CommandInput placeholder="Search settings…" />
  <CommandList>
    <CommandEmpty>No settings found.</CommandEmpty>
    <CommandGroup heading="Account">
      <CommandItem value="profile">Profile</CommandItem>
      <CommandItem value="notifications">Notifications</CommandItem>
      <CommandItem value="billing">Billing</CommandItem>
      <CommandItem value="api-keys">API keys</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Multiple groups + shortcuts

Two-group palette with CommandSeparator and per-item CommandShortcut hints

tsx

<Command className="rounded-lg border shadow-sm">
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem value="new-file">
        New file
        <CommandShortcut>⌘N</CommandShortcut>
      </CommandItem>
      <CommandItem value="open-project">
        Open project
        <CommandShortcut>⌘O</CommandShortcut>
      </CommandItem>
      <CommandItem value="save">
        Save
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem value="theme">
        Switch theme
        <CommandShortcut>⌘⇧T</CommandShortcut>
      </CommandItem>
      <CommandItem value="keyboard">
        Keyboard shortcuts
        <CommandShortcut>⌘/</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

API Reference

Prop	Type	Default	Description
`shouldFilter`	`boolean`	true	Built-in filtering. Set to false for fully-controlled filtering.
`filter`	`function`	—	Custom scoring function: (value, search, keywords?) => number (0..1)
`value`	`string`	—	Controlled active-item value
`onValueChange`	`function`	—	Callback when the highlighted item changes
`loop`	`boolean`	false	Loop arrow-key navigation at the ends of the list
`label`	`string`	—	Accessible label for the menu (not shown visually)

AI Guidance

When to use

Use for searchable menus, command palettes, ⌘K launchers, or as the list body of a Combobox. Built-in fuzzy filter + arrow-key nav + Enter-to-select.

When not to use

Don't use for small static lists (use plain DropdownMenu). Don't use for large data tables (use DataTable). If you need a select input with a single bound value, Combobox is the higher-level wrapper.

Common mistakes

Forgetting CommandList — items won't be scrollable or grouped properly
Giving CommandItem non-unique values (breaks filtering and controlled state)
Overriding CommandInput className to remove the border/padding — breaks the ⌘K icon layout
Not rendering CommandEmpty — the list looks broken when a search has no matches
Querying CommandSeparator via cmdk's internal Separator state — Hex UI renders it as a presentational div with role='none' (and the `data-cmdk-separator` attribute preserved for selector compatibility) so it can sit inside CommandList's role=listbox without violating ARIA

Accessibility

cmdk wires role=listbox/option and aria-activedescendant. Use the `label` prop on Command for a screen-reader-only name when no visible heading exists. CommandSeparator renders with role='none' (still selectable via `[data-cmdk-separator]`) so listbox-children rules are satisfied.

Related components

Token budget: 900

Verified against @hex-core/components@1.12.0

Edit this page on GitHub