Inline
No results found.
Calendar
Search Emoji
Calculator
Profile⌘P
Billing⌘B
Settings⌘S
Dialog Variant
Or press Ctrl+K
Sub-components
| Component | Description |
|---|---|
| Command | Root command container |
| Command.Dialog | Command inside a modal dialog |
| Command.Input | Search input with icon |
| Command.List | Scrollable results list |
| Command.Empty | Shown when no results match |
| Command.Group | Labeled group of items |
| Command.Item | Selectable command item |
| Command.Separator | Visual divider between groups |
| Command.Shortcut | Keyboard shortcut label |
Dialog Props
| Prop | Type | Description |
|---|---|---|
| title | string | Dialog title for accessibility (default: Command Palette) |
| description | string | Dialog description for accessibility |
| open | boolean | Controlled open state |
| onOpenChange | (open: boolean) => void | Open 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>