Navigation: [/sitemap.md](/sitemap.md)

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

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'command' }}
---
import { Card, CardContent } from "@/components/ui/card"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"
---

<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>
            <Icon name="calendar" />
            Calendar
          </CommandItem>
          <CommandItem>
            <Icon name="smile" />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <Icon name="calculator" />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <Icon name="user" />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Icon name="credit-card" />
            Billing
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Icon name="settings" />
            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
```

## Examples

### Basic

A simple command menu in a dialog.

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

<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>
            <Icon name="calendar" />
            Calendar
          </CommandItem>
          <CommandItem>
            <Icon name="search" />
            Search Emoji
          </CommandItem>
          <CommandItem>
            <Icon name="calculator" />
            Calculator
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </DialogContent>
</Dialog>
```

```astro live
---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"
---

<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>
        <Icon name="mail" />
        Send email
        <CommandShortcut>⌘E</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Icon name="rocket" />
        Deploy project
        <CommandShortcut>⌘D</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Icon name="settings" />
        Open settings
        <CommandShortcut>⌘,</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Icon name="keyboard" />
        Keyboard shortcuts
        <CommandShortcut>?</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```

### With Groups

A command menu with groups, icons and separators.

```astro live
---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"
---

<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>
        <Icon name="calendar" />
        Calendar
      </CommandItem>
      <CommandItem>
        <Icon name="file-text" />
        Notes
      </CommandItem>
      <CommandItem>
        <Icon name="folder" />
        Projects
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Account">
      <CommandItem>
        <Icon name="user" />
        Profile
      </CommandItem>
      <CommandItem>
        <Icon name="credit-card" />
        Billing
      </CommandItem>
      <CommandItem>
        <Icon name="settings" />
        Settings
      </CommandItem>
      <CommandItem>
        <Icon name="bolt" />
        API Keys
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```

### Many Groups & Items

Scrollable command menu with multiple items.

```astro live
---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Icon } from "@/components/ui/icon"

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}>
            <Icon name="clock" />
            {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.