Loading...
Loading...
> A fast, composable command menu for your application with keyboard shortcuts support.
1import {2 Command,3 CommandDialog,4 CommandInput,5 CommandList,6 CommandEmpty,7 CommandGroup,8 CommandItem,9 CommandSeparator,10 CommandShortcut,11} from "@/components/ui/command"
1<Command className="border border-border">2 <CommandInput placeholder="Type a command or search..." />3 <CommandList>4 <CommandEmpty>No results found.</CommandEmpty>5 <CommandGroup heading="Suggestions">6 <CommandItem>7 <Calendar className="mr-2 h-4 w-4" />8 <span>Calendar</span>9 </CommandItem>10 <CommandItem>11 <Smile className="mr-2 h-4 w-4" />12 <span>Search Emoji</span>13 </CommandItem>14 <CommandItem>15 <Calculator className="mr-2 h-4 w-4" />16 <span>Calculator</span>17 </CommandItem>18 </CommandGroup>19 <CommandSeparator />20 <CommandGroup heading="Settings">21 <CommandItem>22 <User className="mr-2 h-4 w-4" />23 <span>Profile</span>24 <CommandShortcut>⌘P</CommandShortcut>25 </CommandItem>26 <CommandItem>27 <CreditCard className="mr-2 h-4 w-4" />28 <span>Billing</span>29 <CommandShortcut>⌘B</CommandShortcut>30 </CommandItem>31 <CommandItem>32 <Settings className="mr-2 h-4 w-4" />33 <span>Settings</span>34 <CommandShortcut>⌘S</CommandShortcut>35 </CommandItem>36 </CommandGroup>37 </CommandList>38</Command>
Press ⌘K or click the button to open
1const [open, setOpen] = useState(false);23// Listen for keyboard shortcut4useEffect(() => {5 const down = (e: KeyboardEvent) => {6 if (e.key === "k" && (e.metaKey || e.ctrlKey)) {7 e.preventDefault();8 setOpen((open) => !open);9 }10 };11 document.addEventListener("keydown", down);12 return () => document.removeEventListener("keydown", down);13}, []);1415return (16 <>17 <button onClick={() => setOpen(true)}>18 Open Command Menu19 </button>20 <CommandDialog open={open} onOpenChange={setOpen}>21 <CommandInput placeholder="Type a command or search..." />22 <CommandList>23 <CommandEmpty>No results found.</CommandEmpty>24 <CommandGroup heading="Suggestions">25 <CommandItem>26 <Calendar className="mr-2 h-4 w-4" />27 <span>Calendar</span>28 </CommandItem>29 </CommandGroup>30 </CommandList>31 </CommandDialog>32 </>33);
1<Command className="border border-border">2 <CommandInput placeholder="Search..." />3 <CommandList>4 <CommandEmpty>No results found.</CommandEmpty>5 <CommandGroup heading="Quick Actions">6 <CommandItem>7 <Calendar className="mr-2 h-4 w-4" />8 <span>New Event</span>9 </CommandItem>10 <CommandItem>11 <User className="mr-2 h-4 w-4" />12 <span>New Contact</span>13 </CommandItem>14 </CommandGroup>15 <CommandSeparator />16 <CommandGroup heading="Navigation">17 <CommandItem><span>Dashboard</span></CommandItem>18 <CommandItem><span>Projects</span></CommandItem>19 <CommandItem><span>Team</span></CommandItem>20 </CommandGroup>21 <CommandSeparator />22 <CommandGroup heading="Tools">23 <CommandItem>24 <Calculator className="mr-2 h-4 w-4" />25 <span>Calculator</span>26 </CommandItem>27 <CommandItem>28 <Settings className="mr-2 h-4 w-4" />29 <span>Settings</span>30 </CommandItem>31 </CommandGroup>32 </CommandList>33</Command>
1<Command className="border border-border">2 <CommandInput placeholder="Search files..." />3 <CommandList>4 <CommandEmpty>No files found.</CommandEmpty>5 <CommandGroup>6 <CommandItem>document.pdf</CommandItem>7 <CommandItem>image.png</CommandItem>8 <CommandItem>presentation.pptx</CommandItem>9 <CommandItem>spreadsheet.xlsx</CommandItem>10 </CommandGroup>11 </CommandList>12</Command>
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Accessible label for the command menu. |
| shouldFilter | boolean | true | Whether to filter items based on search input. |
| filter | (value: string, search: string) => number | - | Custom filter function for items. |
| value | string | - | The controlled selected value. |
| onValueChange | (value: string) => void | - | Callback when selected value changes. |
Add a keyboard shortcut to open the command dialog.
1import { useEffect, useState } from "react";2import { CommandDialog } from "@/components/ui/command";34export function CommandMenu() {5 const [open, setOpen] = useState(false);67 useEffect(() => {8 const down = (e: KeyboardEvent) => {9 if (e.key === "k" && (e.metaKey || e.ctrlKey)) {10 e.preventDefault();11 setOpen((open) => !open);12 }13 };1415 document.addEventListener("keydown", down);16 return () => document.removeEventListener("keydown", down);17 }, []);1819 return <CommandDialog open={open} onOpenChange={setOpen}>{/* ... */}</CommandDialog>;20}