Skip to content
Aback UI

Overlays

Command

A keyboard-first command palette with filtering, groups, and shortcuts.

BetaUsed in Aback Launch, Aback GroupRegistry JSON (opens in a new tab)

Keyboard first: ↑ ↓ to move, Enter to run, Esc to close.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add command

Writes components/ui/command.tsx and the components it builds on. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

API reference

Props and composition points for Command. Native element props pass through.

PropTypeDefaultDescription
labelstringNoneAccessible name for the search input. Required; cmdk renders a visually hidden label from it.
shouldFilterbooleantrueFilters items by the query. Turn it off when results come from a server and you filter them yourself.
CommandDialog open / onOpenChangeboolean / (open: boolean) => voidNoneRenders the palette in a modal Dialog. The dialog title and description are visually hidden but announced.
CommandItem value / onSelectstring / (value: string) => voidNoneThe value used for filtering and the callback that runs on click or Enter.
CommandShortcutcomponentNoneA right-aligned keyboard hint. It is decorative text; the action must remain understandable without it.

Dependencies: @tabler/icons-react, cmdk, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • The label prop is not decoration: it names the combobox input. Without it the input is announced as an unnamed edit field.
  • CommandDialog renders a real Dialog with an accessible title and description, focus trapping, Escape, and focus return.
  • cmdk manages the combobox, listbox, and option roles, aria-activedescendant, and the selected state.
  • Filtering keeps the list in sync with aria-activedescendant. Keep items short and do not put a second interactive control inside an item.

Keyboard

KeyAction
ArrowUporArrowDownMove the active option.
EnterRun the active option.
EscapeClose the dialog and return focus to the trigger.

Open the palette with an explicit trigger or a global shortcut. If you advertise ⌘K, implement it and show Ctrl K on non-Apple platforms.

Used in production

The Aback products whose interfaces shaped this component.

Related