Command

A searchable command list with groups, shortcuts, and an empty state, inline or in a dialog.

When to use

Use when: A searchable list of actions or destinations, such as a command palette on ⌘K.
Avoid when: There are only a few options; use Dropdown Menu or Select.

Installation

bunx shelf add command

The source lands in src/components/ui/command.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Command from "@/components/ui/command";

<Command.Root items={groups}>
  <Command.Input aria-label="Search commands" placeholder="Type a command…" />
  <Command.List aria-label="Commands">
    {(group) => (
      <Command.Group key={group.value} items={group.items}>
        <Command.GroupLabel>{group.value}</Command.GroupLabel>
        <Command.Collection>
          {(item) => <Command.Item key={item.value} value={item} onClick={…}>{item.label}</Command.Item>}
        </Command.Collection>
      </Command.Group>
    )}
  </Command.List>
  <Command.Empty>No results.</Command.Empty>
</Command.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: Dialog, foundations, Icons, Kbd, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.