Command

import {
 Command,
 CommandDialog,
 CommandEmpty,
 CommandGroup,
 CommandInput,
 CommandItem,
 CommandList,
 CommandSeparator,
 CommandShortcut,
} from '@/components/ui/command'

// Basic usage
<Command>
 <CommandInput placeholder="Type a command..." />
 <CommandList>
 <CommandEmpty>No results found.</CommandEmpty>
 <CommandGroup heading="Suggestions">
 <CommandItem>
 <Calendar className="mr-2 h-4 w-4" />
 <span>Calendar</span>
 </CommandItem>
 </CommandGroup>
 </CommandList>
</Command>

// As a dialog with keyboard shortcut
const [open, setOpen] = React.useState(false)

React.useEffect(() => {
 const down = (e: KeyboardEvent) => {
 if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
 e.preventDefault()
 setOpen((open) => !open)
 }
 }
 document.addEventListener('keydown', down)
 return () => document.removeEventListener('keydown', down)
}, [])

<CommandDialog open={open} onOpenChange={setOpen}>
 <CommandInput placeholder="Search..." />
 <CommandList>
 <CommandGroup heading="Actions">
 <CommandItem onSelect={() => setOpen(false)}>
 <span>Action</span>
 <CommandShortcut>⌘A</CommandShortcut>
 </CommandItem>
 </CommandGroup>
 </CommandList>
</CommandDialog>