Component

Command

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

Usage

Use command palettes for power-user search and navigation. Trigger with ⌘K or a dedicated search 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>

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