Shadcn Command

The command menu is a searchable list of actions. Type to filter, arrow to a row, Enter to run it. Use it for a ⌘K palette, a file picker, or any list that is faster to search than to scan.

Usage

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

<Command className="max-w-sm rounded-lg border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

shouldFilter is on by default — cmdk scores items as you type. Set value on each CommandItem so icons and shortcuts are not part of the query.

Composition

CommandDialog is that tree in a Dialog. CommandShortcut sits on a CommandItem.

Basic

A command menu in a dialog. Click the button.

Shortcuts

CommandShortcut is the hint on the right of the row. It does not bind the key.

Groups

heading on CommandGroup, CommandSeparator between sections, icons on the items.

Scrollable

CommandList already scrolls at 300px. Navigation, actions, view, account, tools.

RTL

Wrap with DirectionProvider and dir="rtl". The input, groups, and shortcuts follow the reading direction.

API

CommandDialog

CommandItem

CommandGroup

CommandInput takes value and onValueChange for the search string. CommandShortcut is a span.

Keyboard

Focus stays in CommandInput while they arrow. vimBindings is on unless you turn it off.

Notes

Set value on CommandItem when the row has an icon and a shortcut, or the filter string includes ⌘P.

With other components

Questions

Related