Command

A command palette that filters actions as you type, built on cmdk. Use it inline or in CommandDialog for a ⌘K-style overlay.

Playground

placeholder

shortcuts

<Command className="max-w-md rounded-xl shadow-5xs">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <Calendar />
        Calendar
      </CommandItem>
      <CommandItem>
        <Smile />
        Search Emoji
      </CommandItem>
    </CommandGroup>
    <CommandGroup heading="Settings">
      <CommandItem>
        <User />
        Profile
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Settings />
        Settings
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Preview

Command wires the CommandInput to the CommandList below it – typing filters items automatically, and CommandEmpty shows when nothing matches.

<Command className="max-w-md rounded-xl shadow-5xs">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <Calendar />
        Calendar
      </CommandItem>
      <CommandItem>
        <Smile />
        Search Emoji
      </CommandItem>
      <CommandItem>
        <Calculator />
        Calculator
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/command.json

Usage

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

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Groups and shortcuts

Give each CommandGroup a heading and right-align key hints with CommandShortcut.

<Command className="max-w-md rounded-xl shadow-5xs">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <Calendar />
        Calendar
      </CommandItem>
    </CommandGroup>
    <CommandGroup heading="Settings">
      <CommandItem>
        <User />
        Profile
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Settings />
        Settings
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Disabled items

disabled on a CommandItem dims it and removes it from pointer and keyboard selection.

<CommandGroup heading="Unavailable">
  <CommandItem disabled>New Team (Pro plan)</CommandItem>
  <CommandItem disabled>Invite Members (Pro plan)</CommandItem>
</CommandGroup>

Command dialog

CommandDialog wraps the palette in a Dialog positioned at the upper third of the screen – control it with open / onOpenChange and bind it to a ⌘K keydown listener for a global palette.

const [open, setOpen] = React.useState(false)

<Button variant="outline" onClick={() => setOpen(true)}>
  Open command palette
</Button>

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem onSelect={() => setOpen(false)}>
          <Calendar />
          Calendar
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

API reference

Command is the cmdk root and accepts all cmdk props – value, onValueChange, shouldFilter, filter and loop. Every other part takes className plus its cmdk primitive props.

CommandDialog

Prop	Type	Default	Description
title	string	"Command Palette"	Screen-reader-only dialog title (visually hidden DialogTitle).
description	string	"Search for a command to run..."	Screen-reader-only dialog description.
showCloseButton	boolean	false	Show the dialog's top-right close button inside the palette.
open / onOpenChange	boolean / (open) => void	–	Controlled open state, forwarded to the underlying Dialog.

CommandItem

Prop	Type	Default	Description
value	string	–	Value used for filtering and selection; defaults to the item's text content.
onSelect	(value: string) => void	–	Called when the item is picked via click or Enter.
disabled	boolean	false	Dims the item and skips it during navigation.

Component	Description
Command	Filtering root (data-slot="command") on a popover surface; owns the search state.
CommandInput	Search field (data-slot="command-input") rendered inside an InputGroup with a trailing search icon; the wrapper carries data-slot="command-input-wrapper".
CommandList	Scrollable results container (data-slot="command-list") with a max height.
CommandEmpty	Placeholder (data-slot="command-empty") shown when no item matches the query.
CommandGroup	Item group (data-slot="command-group") with an optional heading styled via cmdk-group-heading.
CommandItem	Selectable row (data-slot="command-item") with icon support and a trailing check icon when data-checked is set.
CommandShortcut	Right-aligned keyboard hint span (data-slot="command-shortcut").
CommandDialog	Dialog wrapper that positions the palette at the top third of the viewport with zero padding.

Accessibility & styling hooks

cmdk renders the list with role="listbox", keeps aria-selected on the highlighted option, and supports full keyboard navigation (arrows, Home/End, Enter). In CommandDialog, the underlying Dialog adds focus trapping and Escape-to-close, with a visually hidden title and description for screen readers. Every part exposes a data-slot attribute, and items reflect cmdk state as data-selected and data-disabled – target these from CSS for app-level overrides.