Command
Fast, composable, command menu for React.
Command Palette
Search for a command to run...
No results found.
Calendar
Documents⌘D
Settings⌘S
Installation
npm i cmdkUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import {
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
} from "@/components/ui/command"
export function CommandDemo() {
return (
<Command className="rounded-lg border shadow-md">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>
<CalendarIcon className="mr-2 h-4 w-4" />
<span>Calendar</span>
</CommandItem>
<CommandItem>
<FolderIcon className="mr-2 h-4 w-4" />
<span>Documents</span>
<CommandShortcut>⌘D</CommandShortcut>
</CommandItem>
<CommandItem>
<SettingsIcon className="mr-2 h-4 w-4" />
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
)
}Examples
Command Dialog
Press ⌘K to open the command menu
Props
| Component | Props | Description |
|---|---|---|
| Command | CommandPrimitive.Props | The root component for the command menu. |
| CommandDialog | DialogProps open?: boolean onOpenChange?: (open: boolean) =\ void | A dialog wrapper for the command menu. |
| CommandInput | CommandPrimitive.InputProps placeholder?: string | The input field for the command menu. |
| CommandList | CommandPrimitive.ListProps | The container for command items. |
| CommandEmpty | CommandPrimitive.EmptyProps | Displayed when no results are found. |
| CommandGroup | CommandPrimitive.GroupProps heading?: string | A group of related command items. |
| CommandItem | CommandPrimitive.ItemProps onSelect?: (value: string) =\ void | An individual command item. |
| CommandSeparator | CommandPrimitive.SeparatorProps | A visual separator between command groups. |
| CommandShortcut | HTMLAttributes | Displays a keyboard shortcut for a command. |