Command

Installation

pnpm dlx shadcn@latest add @paneui/command

Usage

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

<Command>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Files">
      <CommandItem onSelect={() => createFile()}>
        New file
        <CommandShortcut>⌘N</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Composition

Command  (or CommandDialog)
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   └── CommandItem
    │       └── CommandShortcut
    └── CommandSeparator

Examples

Dialog

Use for an app-wide palette opened with a shortcut.

Keyboard

↑/↓ (or Ctrl+N / Ctrl+P) move the highlight, Enter runs it, typing filters. Groups with no matches hide, and separators hide while searching.

Filtering

Items rank by prefix, then substring, then letters in order, across value and keywords. Pass filter to change the ranking, or shouldFilter={false} when you filter the items yourself.

API Reference

Also accepts every prop of div.

search: string; Controlled search text.
onSearchChange: (search: string) => void; Called as the input changes.
filter= prefix / substring / in-order letters: (value, search, keywords?) => number; Ranking; 0 hides the item.
shouldFilter= true: boolean; Set false for server-filtered items.
loop= false: boolean; Wrap at the ends with the arrow keys.

Prop	Type	Default	Description
search	string	—	Controlled search text.
onSearchChange	(search: string) => void	—	Called as the input changes.
filter	(value, search, keywords?) => number	prefix / substring / in-order letters	Ranking; 0 hides the item.
shouldFilter	boolean	true	Set false for server-filtered items.
loop	boolean	false	Wrap at the ends with the arrow keys.

CommandDialog

The Command in a centred dialog; the input takes focus on open. Also accepts every prop of Dialog.Root.

title= "Command palette": string; Screen-reader title.
commandProps: CommandProps; Props for the inner Command.

Prop	Type	Default	Description
title	string	"Command palette"	Screen-reader title.
commandProps	CommandProps	—	Props for the inner Command.

CommandItem

Also accepts every prop of div.

value= the text content: string; Identity and search text.
keywords: string[]; Extra words that match.
onSelect: (value: string) => void; Runs on click or Enter.
disabled= false: boolean; Skip in navigation and dim.

Prop	Type	Default	Description
value	string	the text content	Identity and search text.
keywords	string[]	—	Extra words that match.
onSelect	(value: string) => void	—	Runs on click or Enter.
disabled	boolean	false	Skip in navigation and dim.

data-selected: Present on the highlighted item.

Data attribute	Description
data-selected	Present on the highlighted item.

CommandInput

Also accepts every prop of input.

CommandList

Scrolls at 20rem. Also accepts every prop of div.

CommandEmpty

Rendered only when nothing matches. Also accepts every prop of div.

CommandGroup

Also accepts every prop of div.

heading: ReactNode; Label above the items.

Prop	Type	Default	Description
heading	ReactNode	—	Label above the items.

CommandSeparator

Also accepts every prop of div.

CommandShortcut

Also accepts every prop of span.