Command

v0.1.8

Documentation Under Review

Catalyst Command wraps cmdk primitives with design tokens and accessible defaults — giving you a production-ready command palette with fuzzy search and full keyboard navigation out of the box.

Installation

npm install @pmi/catalyst-command

import {
  CommandRoot,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
} from '@pmi/catalyst-command';

Common Patterns

In a Dialog

Embed the command menu inside a Dialog to create a modal command palette triggered by a button or keyboard shortcut.

API Reference

Command is a compound component built on cmdk primitives. The sections below highlight consumer-facing props for the most commonly configured parts of the component.

CommandRoot

The root container that manages command state and search. Accepts all standard cmdk Command props and forwards ref.

CommandInput

Search input for filtering command items. Accepts all standard cmdk Input props and forwards ref.

CommandList

Scrollable container for command groups and items. Accepts all standard cmdk List props and forwards ref. Defaults to max-h-[300px] with overflow scroll.

CommandEmpty

Message displayed when no items match the current search. Accepts all standard cmdk Empty props and forwards ref.

CommandGroup

Groups related items with an optional heading. Accepts all standard cmdk Group props and forwards ref.

CommandItem

Individual selectable command item. Accepts all standard cmdk Item props and forwards ref.

Data attributes: data-selected="true" when the item is highlighted; data-disabled="true" when disabled.

CommandSeparator

Visual divider between command groups. Accepts all standard cmdk Separator props and forwards ref.

Accessibility

Keyboard Interactions

ARIA

• Implements the ARIA combobox pattern via cmdk.
• aria-expanded reflects list expansion state; aria-activedescendant tracks the focused item.
• Search results are announced via live regions.
• Group headings are properly associated with their items via aria-labelledby.
• Catalyst provides the visual styling; cmdk handles the underlying accessibility semantics.

See the cmdk documentation for inherited baseline behavior.

Choosing the Right Component

Use Command when you need a searchable, keyboard-driven action menu. Reach for a different primitive when:

Related

• Dialog
• DropdownMenu
• Select
• Input