Command

Navigation

A searchable palette for commands, actions, and navigation.

Command renders a centered, modal-style search panel over a dark backdrop. Items are grouped and filtered case-insensitively by label and keywords; Escape closes it.

npx shadcn@latest add command

Default

Filter by typing, pick an item to close the palette.

Preview

Live

tsx

1const [open, setOpen] = useState(false)
2
3<Button onClick={() => setOpen(true)}>
4  <Search /> Search
5</Button>
6
7<Command
8  open={open}
9  onOpenChange={setOpen}
10  items={[
11    { id: "home", label: "Go to home", icon: House, group: "Navigation", shortcut: "G H" },
12    { id: "settings", label: "Open settings", icon: Settings, group: "Actions", shortcut: "⌘," },
13  ]}
14/>

Groups & keywords

Items with a group are grouped, and keywords broaden what matches.

Preview

Live

tsx

1<Command
2  open
3  onOpenChange={() => undefined}
4  items={[
5    { id: "home", label: "Go to home", icon: House, group: "Navigation", shortcut: "G H" },
6    { id: "settings", label: "Open settings", icon: Settings, group: "Actions", shortcut: "⌘," },
7  ]}
8/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
open	boolean	Controlled visibility of the palette.
onOpenChange	(open: boolean) => void	Called when the palette should open or close.
items	CommandItemData[]	Items to search, each with id, label, optional icon, keywords, group, and shortcut.
placeholder	string	Placeholder text for the search input.