Command

Command is a searchable command palette for finding and running commands or navigating quickly with the keyboard.

Built on cmdk: typing filters and ranks items by match, the up / down arrows move the selection and Enter runs it. Made of CommandInput, CommandList, CommandEmpty, CommandGroup (group heading), CommandItem, CommandShortcut and CommandSeparator. CommandDialog puts the palette in a Dialog, usually opened with Ctrl/⌘ + K.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport {  Command, CommandDialog, CommandInput, CommandList, CommandEmpty,  CommandGroup, CommandItem, CommandShortcut, CommandSeparator,} from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Groups, shortcuts & separator

Type to filter; disabled items are skipped during navigation.

CommandDialog (Ctrl/⌘ + K)

Press Ctrl + K (⌘ + K on macOS) or click the button to open it; Esc closes it.

Usage

Group commands by context with clear headings.
Show shortcuts with CommandShortcut so people remember them.
Always include CommandEmpty so there is feedback when nothing matches.

Don't

Don't use Command in place of a search for page content (long results, pagination).
Don't add several different shortcuts that open command palettes in one app.

Props

Prop · Type	Default	Description
Command.labelstring	Default: —	Hidden label for screen readers.
Command.shouldFilter / filterboolean / (value, search, keywords?) => number	Default: true	Turns off automatic filtering, or provides your own scoring function.
Command.value / onValueChangestring	Default: —	Highlighted item (controlled).
Command.loopboolean	Default: false	Arrow keys wrap between the first and last item.
CommandInput.value / onValueChangestring	Default: —	Search string (controlled).
CommandGroup.headingReactNode	Default: —	Group heading (caption1 semibold, foreground-3).
CommandItem.value / keywords / onSelect / disabled / iconstring / string[] / (value) => void / boolean / ReactNode	Default: —	Filter value, extra keywords, selection handler, disabled state, icon.
CommandDialog.open / onOpenChange / titleboolean / (open) => void / string	Default: — / — / "Command palette"	Dialog state; title is hidden and read by screen readers.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.command

Key · Type	Default (English)	messagesVi
dialogTitlestring Tiêu đề ẩn (cho trình đọc màn hình) của CommandDialog.	Default (English)`"Command palette"`	messagesVi`"Bảng lệnh"`