Command

Type, and the list narrows.

Default

Inline, with groups, a shortcut, and an entry that cannot be chosen.

A palette written by hand — shadcn uses cmdk, which is not allowed here. The focus stays in the field while the arrow keys move a marker through the list, and the field announces the marked entry, so a screen reader follows. Filtering ignores accents, and the best match is floated to the top without the markup being reordered.

Installation

npx philcn@latest add command

The file is written into your project. It is yours from then on — change it as you like.

Examples

In a dialog

The palette over the page, on ⌘K.

Props

Prop	Type	What it does
Command.shouldFilter	boolean	Turn it off when the results come from a server.
Command.filter	CommandFilter	Your own scoring function, if the built-in one is not enough.
Command.value	string	Controlled: which entry is marked.
CommandItem.keywords	readonly string[]	Extra words that should find this entry, without being shown in it.
CommandItem.disabled	boolean	Shown, but cannot be chosen.
CommandGroup.heading	ReactNode	The line above the group. A group with nothing left in it hides itself.
CommandDialog.open	boolean	Controlled: whether the palette is showing.
CommandDialog.description	string	What a screen reader is told the palette is for, since the dialog has no visible title.

Types are read from the library itself, so this table cannot describe an option the code no longer has.

Worth knowing

A combobox is one of these inside a Popover — the same composition shadcn uses, rather than a component of its own.