← All Components

Command

Command palette for searching and executing actions. Built on cmdk with Dialog integration.

Inline

Dialog Variant

Or press Ctrl+K

Sub-components

ComponentDescription
CommandRoot command container
Command.DialogCommand inside a modal dialog
Command.InputSearch input with icon
Command.ListScrollable results list
Command.EmptyShown when no results match
Command.GroupLabeled group of items
Command.ItemSelectable command item
Command.SeparatorVisual divider between groups
Command.ShortcutKeyboard shortcut label

Dialog Props

PropTypeDescription
titlestringDialog title for accessibility (default: Command Palette)
descriptionstringDialog description for accessibility
openbooleanControlled open state
onOpenChange(open: boolean) => voidOpen state change handler

Usage

{/* Inline */} <Command> <Command.Input placeholder="Search..." /> <Command.List> <Command.Empty>No results.</Command.Empty> <Command.Group heading="Actions"> <Command.Item>Profile</Command.Item> <Command.Item>Settings</Command.Item> </Command.Group> </Command.List> </Command> {/* Dialog */} <Command.Dialog open={open} onOpenChange={setOpen}> <Command.Input placeholder="Search..." /> <Command.List> <Command.Group heading="Actions"> <Command.Item>Profile</Command.Item> </Command.Group> </Command.List> </Command.Dialog>