Command

---
import CalculatorIcon from "@lucide/astro/icons/calculator"
import CalendarIcon from "@lucide/astro/icons/calendar"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import SettingsIcon from "@lucide/astro/icons/settings"
import SmileIcon from "@lucide/astro/icons/smile"
import UserIcon from "@lucide/astro/icons/user"

import { Card, CardContent } from "@/components/ui/card"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
---

<Card class="w-full max-w-md p-0">
  <CardContent class="p-0">
    <Command>
      <CommandInput placeholder="Search commands..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            Calendar
          </CommandItem>
          <CommandItem>
            <SmileIcon />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <CalculatorIcon />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <UserIcon />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCardIcon />
            Billing
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <SettingsIcon />
            Settings
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CardContent>
</Card>

Installation

npx shadcn@latest add @fulldev/command

Usage

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

<Command class="ring-foreground/10 max-w-sm rounded-lg ring-1">
  <CommandInput placeholder="Search commands..." />
  <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>

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

Examples

Basic

A simple command menu in a dialog.

---
import CalculatorIcon from "@lucide/astro/icons/calculator"
import CalendarIcon from "@lucide/astro/icons/calendar"
import SearchIcon from "@lucide/astro/icons/search"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
---

<Dialog>
  <DialogTrigger variant="outline">Open Command Menu</DialogTrigger>
  <DialogContent
    class="top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0"
    showCloseButton={false}
  >
    <DialogHeader class="sr-only">
      <DialogTitle>Command Palette</DialogTitle>
      <DialogDescription>Search for a command to run...</DialogDescription>
    </DialogHeader>
    <Command>
      <CommandInput placeholder="Search commands..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            Calendar
          </CommandItem>
          <CommandItem>
            <SearchIcon />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <CalculatorIcon />
            Calculator
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </DialogContent>
</Dialog>

---
import KeyboardIcon from "@lucide/astro/icons/keyboard"
import MailIcon from "@lucide/astro/icons/mail"
import RocketIcon from "@lucide/astro/icons/rocket"
import SettingsIcon from "@lucide/astro/icons/settings"

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

<Command class="ring-foreground/10 w-full max-w-md ring-1">
  <CommandInput placeholder="Search shortcuts..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Quick actions">
      <CommandItem>
        <MailIcon />
        Send email
        <CommandShortcut>⌘E</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <RocketIcon />
        Deploy project
        <CommandShortcut>⌘D</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <SettingsIcon />
        Open settings
        <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <KeyboardIcon />
        Keyboard shortcuts
        <CommandShortcut>?</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

With Groups

A command menu with groups, icons and separators.

---
import BoltIcon from "@lucide/astro/icons/bolt"
import CalendarIcon from "@lucide/astro/icons/calendar"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import FileTextIcon from "@lucide/astro/icons/file-text"
import FolderIcon from "@lucide/astro/icons/folder"
import SettingsIcon from "@lucide/astro/icons/settings"
import UserIcon from "@lucide/astro/icons/user"

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

<Command class="ring-foreground/10 w-full max-w-md ring-1">
  <CommandInput placeholder="Search actions..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <CalendarIcon />
        Calendar
      </CommandItem>
      <CommandItem>
        <FileTextIcon />
        Notes
      </CommandItem>
      <CommandItem>
        <FolderIcon />
        Projects
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Account">
      <CommandItem>
        <UserIcon />
        Profile
      </CommandItem>
      <CommandItem>
        <CreditCardIcon />
        Billing
      </CommandItem>
      <CommandItem>
        <SettingsIcon />
        Settings
      </CommandItem>
      <CommandItem>
        <BoltIcon />
        API Keys
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Many Groups & Items

Scrollable command menu with multiple items.

---
import ClockIcon from "@lucide/astro/icons/clock"

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

const recentSearches = Array.from({ length: 18 }, (_, index) => ({
  label: `Recent search ${index + 1}`,
  value: `recent-search-${index + 1}`,
}))
---

<Command class="ring-foreground/10 h-[24.5rem] w-full max-w-md ring-1">
  <CommandInput placeholder="Search recent activity..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Recent">
      {
        recentSearches.map((item) => (
          <CommandItem value={item.value}>
            <ClockIcon />
            {item.label}
          </CommandItem>
        ))
      }
    </CommandGroup>
  </CommandList>
</Command>

API Reference

See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search