Component

Command

Filterable command palette with grouped results. Use for search, navigation, and quick actions.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/command

Usage

Use command palettes for power-user search and navigation. Trigger with ⌘K or a dedicated search button.

Composition

Dialog Button

Playground

Preview

Configure

Code

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem filterValue="calendar">Calendar</CommandItem>
      <CommandItem filterValue="search emoji">Search Emoji</CommandItem>
      <CommandItem filterValue="calculator">Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem filterValue="profile">Profile</CommandItem>
      <CommandItem filterValue="billing">Billing</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Variants & States

Supported variants, sizes, and interaction states for this component.

States

Default
Empty results

Do

Group items into logical sections with clear headings
Show an empty state when no results match the query

Don't

Don't show more than 10 items per group without pagination
Don't use a command palette as the only search mechanism