Command

Docs

Command

Fast, composable, unstyled command menu for React.

import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
 
import {
  Command_Shadcn_,
  CommandEmpty_Shadcn_,
  CommandGroup_Shadcn_,
  CommandInput_Shadcn_,
  CommandItem_Shadcn_,
  CommandList_Shadcn_,
  CommandSeparator_Shadcn_,
  CommandShortcut_Shadcn_,
} from 'ui'
 
export function CommandDemo() {
  return (
    <Command_Shadcn_ className="rounded-lg border shadow-md">
      <CommandInput_Shadcn_ placeholder="Type a command or search..." />
      <CommandList_Shadcn_>
        <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
        <CommandGroup_Shadcn_ heading="Suggestions">
          <CommandItem_Shadcn_>
            <Calendar className="mr-2 h-4 w-4" />
            <span>Calendar</span>
          </CommandItem_Shadcn_>
          <CommandItem_Shadcn_>
            <Smile className="mr-2 h-4 w-4" />
            <span>Search Emoji</span>
          </CommandItem_Shadcn_>
          <CommandItem_Shadcn_>
            <Calculator className="mr-2 h-4 w-4" />
            <span>Calculator</span>
          </CommandItem_Shadcn_>
        </CommandGroup_Shadcn_>
        <CommandSeparator_Shadcn_ />
        <CommandGroup_Shadcn_ heading="Settings">
          <CommandItem_Shadcn_>
            <User className="mr-2 h-4 w-4" />
            <span>Profile</span>
            <CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
          </CommandItem_Shadcn_>
          <CommandItem_Shadcn_>
            <CreditCard className="mr-2 h-4 w-4" />
            <span>Billing</span>
            <CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
          </CommandItem_Shadcn_>
          <CommandItem_Shadcn_>
            <Settings className="mr-2 h-4 w-4" />
            <span>Settings</span>
            <CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
          </CommandItem_Shadcn_>
        </CommandGroup_Shadcn_>
      </CommandList_Shadcn_>
    </Command_Shadcn_>
  )
}

About

The <Command /> component uses the cmdk component by pacocoursey.

Installation

npx shadcn-ui@latest add command

Usage

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

<Command>
  <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</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog

Press ⌘J

To show the command menu in a dialog, use the <CommandDialog /> component.

export function CommandMenu() {
  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)
  }, [])
 
  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <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>
      </CommandList>
    </CommandDialog>
  )
}

Combobox

You can use the <Command /> component as a combobox. See the Combobox page for more information.

PreviousCombobox

NextCommand Menu (cmdk)