Command

A fast, composable command menu built on cmdk.

Installation

bash
npx shadcn@latest add command

Import

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

Inline command palette

<Command className="rounded-lg border shadow-md">  <CommandInput placeholder="Type a command or search..." />  <CommandList>    <CommandEmpty>No results found.</CommandEmpty>    <CommandGroup heading="Suggestions">      <CommandItem>Calendar</CommandItem>      <CommandItem>Search Emoji</CommandItem>      <CommandItem>Calculator</CommandItem>    </CommandGroup>    <CommandSeparator />    <CommandGroup heading="Settings">      <CommandItem>Profile <CommandShortcut>P</CommandShortcut></CommandItem>      <CommandItem>Billing <CommandShortcut>B</CommandShortcut></CommandItem>      <CommandItem>Settings <CommandShortcut>,</CommandShortcut></CommandItem>    </CommandGroup>  </CommandList></Command>

Global Cmd+K dialog

export function CommandMenu() {  const [open, setOpen] = React.useState(false)  const router = useRouter()  React.useEffect(() => {    const down = (e: KeyboardEvent) => {      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {        e.preventDefault()        setOpen((prev) => !prev)      }    }    document.addEventListener("keydown", down)    return () => document.removeEventListener("keydown", down)  }, [])  return (    <>      <Button variant="outline" onClick={() => setOpen(true)} className="text-muted-foreground">        Search... <CommandShortcut>Cmd+K</CommandShortcut>      </Button>      <CommandDialog open={open} onOpenChange={setOpen}>        <CommandInput placeholder="Type a command or search..." />        <CommandList>          <CommandEmpty>No results found.</CommandEmpty>          <CommandGroup heading="Pages">            <CommandItem onSelect={() => { router.push("/getting-started"); setOpen(false) }}>              Getting Started            </CommandItem>            <CommandItem onSelect={() => { router.push("/elements/ui"); setOpen(false) }}>              Components            </CommandItem>          </CommandGroup>        </CommandList>      </CommandDialog>    </>  )}

Props

PROPTYPEDEFAULTDESCRIPTION
placeholderstring—On CommandInput — search input placeholder
valuestring—On CommandItem — item value for filtering
onSelect() => void—On CommandItem — called when item is selected
disabledbooleanfalseOn CommandItem — disables the item
openboolean—On CommandDialog — controlled open state
onOpenChange(open: boolean) => void—On CommandDialog — called when open state changes

Notes

  • CommandInput filters the list automatically \u2014 no extra state needed
  • CommandEmpty only shows when no items match the current input
  • Always clean up the keydown event listener in useEffect return