Command

A searchable list of actions with groups, shortcuts and a clear empty state.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add command

What add command installs alongside the component. The CLI skips any you already have in a compatible version.

2 examples · 1 component

Inline palette with two groups, key hints and an empty state.

A button and ⌘K / Ctrl K open it; choosing an action closes it.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`Command` Base UI Autocomplete rendered inline and always open, with the first match highlighted. items (strings, { value, label } objects or groups) is required for filtering; also filter, limit and onValueChange.	`—`	—
`CommandInput` Search field with a leading icon. Name it with aria-label or a Label.	`input`	—
`CommandList` Scrollable list; its child is a function that renders each item or group.	`div`	—
`CommandItem` An action. onClick runs on click and on Enter; value is the item from items.	`div`	—
`CommandGroup / CommandGroupLabel / CommandCollection` Groups: pass the group's items to CommandGroup and render them with CommandCollection. The label must sit inside the group.	`div`	—
`CommandEmpty` Shown only when nothing matches.	`div`	—
`CommandSeparator` Divider between groups.	`div`	—
`CommandShortcut` Key hint at the end of an item; hidden from assistive tech.	`span`	—
`CommandDialog` Modal near the top of the screen with an sr-only title and close button; open/onOpenChange like Dialog.	`Dialog`	`title = "Command palette"`

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Every item listed; the first one highlighted.
Filtered	Only matching items remain, grouped as before.
Highlighted	Accent surface on the active item, by keyboard or pointer.
Empty	CommandEmpty replaces the list.
Disabled	Dimmed and announced as unavailable; arrow keys still reach it, but Enter and clicks do nothing.

The input is a combobox that owns the list: arrow keys move through items while focus stays in the input, and Enter runs the highlighted one.

The first match stays highlighted as you type, so Enter always has a target; CommandEmpty explains when there is none instead of an empty box.

In CommandDialog the input takes focus on open, the dialog is named by its hidden title, and Escape closes it and returns focus to the trigger.

A keyboard shortcut (⌘K / Ctrl K) must never be the only way in: keep a visible button that opens the palette.

Shortcut hints are hidden from screen readers; the item's own text is its name.