---
type: doc
title: Command
description: Command menu for search and quick actions.
---

```astro live props={{ name: 'command' }}
---
import CalculatorIcon from "@lucide/astro/icons/calculator"
import CalendarIcon from "@lucide/astro/icons/calendar"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import SmileIcon from "@lucide/astro/icons/face-slightly-smiling"
import SettingsIcon from "@lucide/astro/icons/settings"
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

```bash
npx shadcn@latest add @fulldev/command
```

## Usage

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

```astro
<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`:

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

### Command dialog

`CommandDialog` includes its own Dialog root. Put `DialogTrigger` in its `trigger`
slot; wrapping it in another `Dialog` creates an outer root with no content owned
by that root, which Data Slot 1.x rejects.

```astro live
---
import {
  Command,
  CommandDialog,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { DialogTrigger } from "@/components/ui/dialog"
---

<CommandDialog title="Quick actions">
  <DialogTrigger slot="trigger" variant="outline">Quick actions</DialogTrigger>
  <Command>
    <CommandInput autofocus placeholder="Find an action..." />
    <CommandList>
      <CommandItem value="profile">Profile</CommandItem>
      <CommandItem value="settings">Settings</CommandItem>
    </CommandList>
  </Command>
</CommandDialog>
```

Use native `autofocus` on a dialog's `CommandInput` so Data Slot places initial
focus in the search field. Leave it off standalone command menus.

## Examples

### Basic

A simple command menu in a dialog.

```astro live
---
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 autofocus 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>
```

```astro live
---
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.

```astro live
---
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.

```astro live
---
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/command) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/command/README.md) for more information on interactivity.