Command

A command palette built from Base UI dialog and autocomplete primitives.

Newoverlaynavigation

Loading preview...

command stays a single installable. The richer workspace and AI-assisted demos below are both built from the same exported primitives in components/ui/command.tsx.

Installation

Run the following command to add the component to your project:

npx baseui-cn add command

Usage

import {
  Command,
  CommandCollection,
  CommandDialog,
  CommandDialogPopup,
  CommandEmpty,
  CommandGroup,
  CommandGroupLabel,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPanel,
} from "@/components/ui/command"

;<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandDialogPopup>
    <Command items={groups}>
      <CommandInput placeholder="Search actions..." />
      <CommandPanel>
        <CommandEmpty>No matches found.</CommandEmpty>
        <CommandList>
          {(group) => (
            <CommandGroup key={group.value} items={group.items}>
              <CommandGroupLabel>{group.value}</CommandGroupLabel>
              <CommandCollection>
                {(item) => (
                  <CommandItem key={item.value} value={item.value}>
                    {item.label}
                  </CommandItem>
                )}
              </CommandCollection>
            </CommandGroup>
          )}
        </CommandList>
      </CommandPanel>
    </Command>
  </CommandDialogPopup>
</CommandDialog>

Examples

Workspace Palette

Loading preview...

This is the main polished command palette surface: grouped actions, shortcuts, footer hints, and the dialog shell working together as one installable.

AI-Assisted Variant

Loading preview...

This variant shows how far the same primitives can stretch: inline search, an AI mode, loading states, and empty-state handling without switching away from the Base UI-first command structure.

Exports

Command renders the open inline palette surface.
CommandDialog, CommandDialogPopup, and CommandDialogTrigger handle the overlay shell.
CommandInput, CommandList, CommandGroup, CommandCollection, and CommandItem compose the searchable list.
CommandEmpty, CommandSeparator, CommandFooter, and CommandShortcut round out the interaction details.

API

Command

Prop	Type	Default	Description
`autoHighlight`	`"always" \| "whenOpen" \| false`	`"always"`	When to automatically highlight the first matching item
`keepHighlight`	`boolean`	`true`	Keep the highlighted item highlighted after the list updates