Command

Description

Command is a searchable command palette (the ⌘K menu) built on cmdk inside a Radix Dialog shell. It is a compound component composed from flat parts (CommandTrigger, CommandContent, CommandInput, CommandList, CommandGroup, CommandItem, and friends) that share a size and backdrop context set on the root. The region under the input is a free slot: drop in groups, a spinner, tabs, or any other component and cmdk filters the items it can see.

Reach for it as a launcher: a ⌘K palette for quick actions, jump-to navigation across files, people, and settings, or cross-surface search. It works attached to a button, a keyboard shortcut, or both. The palette has no built-in launcher, so you drive its open state and wire the shortcut yourself.

Command is a Pro component, added with add command and a Pro seat. Don't use it to bind a form value: for a single value inside a Field use Select, and for a free-text filter that commits a value use Combobox. For a short action list hanging off a button use Dropdown Menu, for right-click on a region use Context Menu, and for arbitrary non-menu content use Popover.

Installation

pnpm dlx @create-ui/cli add command

Anatomy

<Command>
  <CommandTrigger />
  <CommandContent>
    <CommandMain>
      <CommandInput />
      <CommandList>
        <CommandEmpty />
        <CommandGroup>
          <CommandItem>
            <CommandItemIcon />
            <CommandItemContent>
              <CommandItemTitle />
              <CommandItemDescription />
            </CommandItemContent>
            <CommandShortcut />
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandMain>
    <CommandFooter>
      <CommandFooterItem />
    </CommandFooter>
  </CommandContent>
</Command>

Usage

import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandMain,
  CommandTrigger,
} from "@/components/ui/command"

<Command open={open} onOpenChange={setOpen}>
  <CommandTrigger asChild>
    <Button>Open</Button>
  </CommandTrigger>
  <CommandContent>
    <CommandMain>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem value="new-file">New file</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandMain>
  </CommandContent>
</Command>

Examples

Command is Pro, so every preview below carries a Pro badge: the live demo runs, but the source needs a Pro seat via add command.

Sizes

size on the root is sm or md (md is the default) and cascades through context to padding, type, and every nested part. Read it back with useCommandSize() to scale content you drop into the slot.

Backdrop

backdrop styles the overlay behind the panel: blur (default), opaque, or transparent.

Groups

CommandGroup labels a run of items with heading and auto-inserts a separator after itself. Pass action to pin a trailing control (like a CommandItemLink) next to the heading.

Tabbed categories

Wrap the list in Tabs to split it into categories: put the TabsList and the CommandList inside one Tabs root, and give each TabsContent panel its own groups. Only the active panel mounts, so the search filters within the current category. Refocus the input on onValueChange so a tab click doesn't steal typing.

Large and featured items

featured gives a row a filled surface for a hero action; large makes a taller row that pairs a CommandItemTitle with a CommandItemDescription. Add a CommandShortcut with CommandKbd keys on the right.

Links

Give a CommandItem an href to render it as an anchor. The palette bridges cmdk selection to a real click, so keyboard Enter navigates. target defaults to _blank; a trailing CommandItemChevron signals the jump.

Footer

Add a CommandFooter as a sibling of CommandMain inside CommandContent to pin a bar below the list. Each CommandFooterItem is a labelled keyboard hint built from CommandKbd keys (a letter or a bare icon glyph), and any plain node — a CommandItemLink, a help line — can sit at the trailing edge. Open each button to compare a pure keyboard-hint footer and a help footer with a trailing link.

Custom slot content

The region under the input is a free slot — drop in any of our components. Here Progress shows project completion, StatusBadge shows presence, and CountryFlag marks a language. cmdk still filters the CommandItems that wrap them.

Empty and loading states

CommandEmpty renders when a query matches nothing. Because the list is a free slot, an async loader is just a Spinner dropped in place of the groups.

Accessibility

Command inherits cmdk's list model inside Radix Dialog's modal shell. Focus stays on the input; arrow keys move the active item and the list loops by default (loop on CommandContent).

ARIA notes:

• Radix Dialog manages the focus trap, focus restoration, and scroll lock while the palette is open. CommandContent renders an sr-only Dialog Title (default "Command Menu") and, when you pass description, an sr-only description wired through aria-describedby.
• cmdk sets data-selected on the active item and data-disabled on disabled rows, and manages the roving highlight as you type or arrow through the list.
• When you filter server-side (shouldFilter={false}) and swap the list for fresh results, cmdk can keep a stale highlight so Enter does nothing. Drive value / onValueChange on CommandContent to pin the active item (e.g. to the first result whenever it changes) so Enter always opens the top match.
• CommandItem bridges cmdk's select event to a native DOM click, so an item with an href navigates on Enter and a plain item fires its onClick. Give any icon-only CommandKbd or control an accessible label.
• There is no built-in ⌘K handler. Drive open / onOpenChange yourself and add a document keydown listener for the shortcut. See the cmdk docs for the underlying filtering and keyboard model.

Styling

Tailwind override: pass className to merge Tailwind classes on any part (merged via cn()):

<CommandContent className="max-w-140" />

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="command-trigger" on the trigger, command-overlay on the backdrop (with data-backdrop), command-content on the panel, command-main on the inner surface, command-input on the search row, command-list on the scrolling list, command-empty on the empty state, command-group on a group, and command-footer / command-footer-item on the footer.
• data-slot="command-item" on a row, plus command-item-icon, command-item-content, command-item-title, command-item-secondary, command-item-description, command-item-meta, command-item-link, command-shortcut, command-kbd, and command-separator on the item sub-parts.
• data-size="sm" | "md" mirrors the root size on most slots; data-featured and data-large flag those item variants; cmdk sets data-selected / data-disabled on items and Radix sets data-state="open" | "closed" on the content and overlay for animation.

Target a state in CSS:

[data-slot="command-item"][data-selected="true"] {
  /* … */
}

Related Components

• Dropdown Menu: a short action list attached to a trigger, without search or a modal shell.
• Select: form-value picker bound to a Field; use it when the chosen value is what the form submits.
• Combobox: free-text filter that commits a single value, rendered inline rather than in a modal.
• Popover (Pro): an anchored surface for arbitrary content with no list or filtering semantics.

API Reference

The palette is composed from flat named exports (there is no Command.* namespace). Every part is Pro. size and backdrop are set on the root and read through context by the rest; the useCommandSize() hook exposes the current size for scaling nested content.

Command

The root. Wraps Radix's Dialog.Root and provides the size/backdrop context. Extends React.ComponentProps<typeof Dialog.Root>, so open, defaultOpen, onOpenChange, and modal pass through.

Props

Variants

CommandTrigger

The element that opens the palette. Extends Radix's Dialog.Trigger; use asChild to wrap your own Button.

Props

CommandContent

The floating panel. Renders the portal, overlay, and the cmdk root, and centers the panel in the viewport. Extends Radix's Dialog.Content and picks up cmdk's filter / shouldFilter plus value / onValueChange for controlled selection.

Props

CommandInput

The search field, with a leading search icon and an ESC hint pill. Extends cmdk's Command.Input, so value, onValueChange, placeholder, and ref pass through.

Props

CommandGroup

A labeled run of items, followed by an automatic separator. Extends cmdk's Command.Group.

Props

CommandItem

A row. Renders a <button> by default, an <a> when href is set, or the child via Slot when asChild. Extends cmdk's Command.Item, so value, disabled, and onSelect pass through.

Props

CommandKbd

A keyboard-key badge. Extends Badge minus variant / appearance / iconOnly (those are fixed); it auto-switches to icon-only when its child is not a string or number.

Props

CommandFooter

A bar pinned below the list. Extends React.ComponentProps<"div">.

Props

CommandFooterItem

A labeled hint inside the footer. Extends React.ComponentProps<"div">.

Props

CommandClose

Closes the palette from inside the panel. Extends Radix's Dialog.Close.

Props

Item parts

Display sub-parts composed inside a CommandItem (and the list). Each accepts className and children unless noted; CommandItemContent also takes inline (boolean, default false) to lay title and secondary out on one row.

The commandItemVariants and commandBackdropVariants CVA functions are exported for advanced style extension, and useCommandSize() returns the active "sm" | "md" for scaling nested content.