Command

Search and run local actions, inline or inside an explicit dialog.

Interactive preview

Live specimenTry the component

No command run yet. No global shortcut is installed.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add command

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Command label="Search actions" items={[
  { value: 'new', label: 'Create local project', group: 'Projects', onSelect: createLocalProject },
]} />

<CommandDialog open={open} onOpenChange={setOpen}
  label="Search actions" items={actions} />

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`items`	`CommandItem[]: value, label, onSelect, group?, keywords?, disabled?, description?`	`required`
`label / placeholder / emptyMessage`	`string`	`label required / Search commands… / No commands found.`
`loading / onAction`	`boolean / (value: string) => void`	`false / optional`
`CommandItem: onSelect`	`() => void \| false`	`false keeps dialog open`
`CommandDialog: open / onOpenChange`	`boolean / (boolean) => void`	`required controlled state`
`CommandDialog: title / description`	`string`	`Run a command / Search available actions in this workspace.`

Accessibility

A searchable local command list uses a labeled combobox and listbox with grouped items. Arrow keys move the active action; Enter runs it, disabled actions never run, Escape clears an inline query. CommandDialog composes the original native Dialog; Escape closes it and focus returns to its explicit trigger. Item onSelect returns false to keep a dialog open; successful actions notify onAction. Caller owns side effects, errors, permissions and asynchronous work. No global keyboard shortcut is registered. Command forwards a div ref/native attributes; label names the search input. CommandDialog open/onOpenChange are controlled and its ref also targets the Command div, not a dialog element. Native form fields and free text are not the command result.