Overlays

Command

A searchable list of commands on cmdk. Inline, or as a palette in a dialog with CommandDialog.

packages/design-system/components/ui/command.tsx

Examples

Inline

Command Palette

Search for a command to run...

As a palette. Click, or press Cmd K

Anatomy

  1. 01Command, rounded-4xl
  2. 02Input with a search icon
  3. 03List
  4. 04Groups with headings
  5. 05Items with shortcuts
  6. 06Empty state

Usage

import {
  Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList,
} from "@repo/design-system/components/ui/command";

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Go to a page" />
    <CommandList>
      <CommandEmpty>Nothing found.</CommandEmpty>
      <CommandGroup heading="Pages">
        <CommandItem onSelect={() => router.push("/projects")}>Projects</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

Props

PropTypeDefaultDescription
CommandDialog title / descriptionstring"Command Palette"Screen reader only header for the dialog.
CommandDialog showCloseButtonbooleanfalseThe dialog's X.
CommandGroup headingReactNodenoneThe group's label.
CommandItem onSelect(value: string) => voidnoneCalled on click or Enter.
Command filter / shouldFiltercmdk propsnoneCustom scoring, or turn filtering off for server results.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Wrap the children of CommandDialog in a Command.

Don't

  • Use it as a select. It is for doing, not choosing a value.