Components

Command

A keyboard-first command palette. It supports search, grouped results, icons, full keyboard navigation, and empty states. Command is the primitive that Combobox is built on. Combobox wraps this list in a Popover and a trigger; here it stands alone.

Preview

Rendered with live Cognition tokens. Type to filter and use the arrow keys, no dark: classes.

Variants

<CommandGroup>
  <CommandItem>New file</CommandItem>
</CommandGroup>

<CommandGroup heading="Pages">...</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Help">...</CommandGroup>

<CommandItem>
  <User />
  <span>Profile</span>
</CommandItem>

Inline. Rendered in place rather than inside a dialog. Wrap it in a Dialog for a modal palette.

Group items with CommandGroup, divide groups with CommandSeparator, and add a leading icon inside any CommandItem.

States

Default. The full list, first item highlighted.

Searching. The list narrows to matches as you type.

Empty. No command matches the query.

Loading. Results are being fetched, often with shouldFilter=false.

For server-driven results set shouldFilter={false} and render your own list, including the loading row.

API

Prop

Type

Default

Description

value

string

undefined

The currently selected item value when controlled.

onValueChange

(value: string) => void

undefined

Called when the highlighted value changes.

filter

(value, search) => number

built-in

Custom scoring function. Return 0 to hide an item, higher to rank it sooner.

shouldFilter

boolean

true

Set false to filter the list yourself, for example against a server.

loop

boolean

false

Wrap keyboard navigation from the last item back to the first.

Props apply to Command. The list is assembled from CommandInput, CommandList, CommandGroup, CommandItem, and CommandEmpty.

Don't and Do

Don't

Don't use Command for plain option selection. Picking one value from a field is the job of a Select, or a Combobox when the list is long. Command carries the weight of a full palette, which is more than a single choice needs.

<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem onSelect={runDeploy}>Deploy</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Use it for power-user surfaces, global search, and action launchers where keyboard-first interaction is expected.

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

export function Palette() {
  return (
    <Command className="rounded-lg border border-border-default">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}