Skip to main content

​
Installation

npm install cmdk
Or use the CLI: 
npx shadcn@latest add command

​
About

The Command component is built on top of cmdk by Dip.

​
Usage

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

<Command className="max-w-sm rounded-lg border">
  <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>

​
Component API

​
Command

The root command menu component. Props:
  • Standard React component props
  • className - Additional CSS classes

​
CommandDialog

A command menu rendered inside a dialog. Props:
  • title - Dialog title (default: "Command Palette")
  • description - Dialog description
  • showCloseButton - Show close button (default: true)
  • open - Control dialog open state
  • onOpenChange - Callback when open state changes

​
CommandInput

The search input field. Props:
  • placeholder - Placeholder text
  • value - Controlled input value
  • onValueChange - Callback when value changes

​
CommandList

Container for command items with scroll overflow. Props:
  • className - Additional CSS classes

​
CommandEmpty

Displayed when no results are found. Props:
  • Children to display when empty

​
CommandGroup

Groups related commands together. Props:
  • heading - Group heading text
  • className - Additional CSS classes

​
CommandItem

An individual command item. Props:
  • onSelect - Callback when item is selected
  • disabled - Disable the item
  • value - Search value for filtering

​
CommandShortcut

Displays keyboard shortcuts. Props:
  • Children to display (typically keyboard shortcut text)

​
CommandSeparator

Visual separator between groups.

​
Examples

​
Dialog

Open the command menu in a dialog: 
import * as React from "react"
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

export function CommandDialogExample() {
  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>
  )
}

​
Shortcuts

Add keyboard shortcuts to command items: 
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

export function ShortcutsExample() {
  return (
    <Command>
      <CommandList>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            New File
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            New Window
            <CommandShortcut>⌘⇧N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            Open File
            <CommandShortcut>⌘O</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

​
With Icons

Add icons to command items: 
import { Calendar, Smile, Calculator } from "lucide-react"
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

export function IconsExample() {
  return (
    <Command>
      <CommandList>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar />
            Calendar
          </CommandItem>
          <CommandItem>
            <Smile />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <Calculator />
            Calculator
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

​
Groups and Separators

Organize commands with groups and separators: 
import {
  Command,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

export function GroupsExample() {
  return (
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>Profile</CommandItem>
          <CommandItem>Billing</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

​
Accessibility

  • Full keyboard navigation support
  • ARIA labels and roles
  • Focus management
  • Screen reader compatible

​
API Reference

See the cmdk documentation for complete API details.

Build docs developers (and LLMs) love

Get started for freeTalk to us