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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/command/command-demo.astro"
---
import Calculator from "@lucide/astro/icons/calculator"
import Calendar from "@lucide/astro/icons/calendar"
import CreditCard from "@lucide/astro/icons/credit-card"
import Smile from "@lucide/astro/icons/face-slightly-smiling"
import Settings from "@lucide/astro/icons/settings"
import User from "@lucide/astro/icons/user"

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

<Command class="max-w-sm rounded-lg border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <Calendar />
        <span>Calendar</span>
      </CommandItem>
      <CommandItem>
        <Smile />
        <span>Search Emoji</span>
      </CommandItem>
      <CommandItem disabled>
        <Calculator />
        <span>Calculator</span>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <User />
        <span>Profile</span>
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <CreditCard />
        <span>Billing</span>
        <CommandShortcut>⌘B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Settings />
        <span>Settings</span>
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```

## 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="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>
```

Filtering, keyboard navigation and selection run on Data Slot. A `CommandItem`
with `href` renders a link that Enter follows.

## Composition

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

## Command Dialog

`CommandDialog` includes its own `Dialog` root. Put a `DialogTrigger` in its
`trigger` slot; wrapping it in another `Dialog` creates an outer root with no
content, which Data Slot rejects. Focus starts in the search field, the first
focusable element while `showCloseButton` is `false` (the default).

```astro
<CommandDialog>
  <DialogTrigger slot="trigger" variant="outline">
    Open Menu
  </DialogTrigger>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>...</CommandList>
  </Command>
</CommandDialog>
```

## Basic

A simple command menu in a dialog.

```astro title="src/components/examples/command/command-basic.astro"
---
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { DialogTrigger } from "@/components/ui/dialog"
---

<div class="flex flex-col gap-4">
  <CommandDialog>
    <DialogTrigger slot="trigger" variant="outline" class="w-fit">
      Open Menu
    </DialogTrigger>
    <Command>
      <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>
    </Command>
  </CommandDialog>
</div>
```

## Shortcuts

```astro title="src/components/examples/command/command-shortcuts.astro"
---
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import SettingsIcon from "@lucide/astro/icons/settings"
import UserIcon from "@lucide/astro/icons/user"

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

<div class="flex flex-col gap-4">
  <CommandDialog>
    <DialogTrigger slot="trigger" variant="outline" class="w-fit">
      Open Menu
    </DialogTrigger>
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Settings">
          <CommandItem>
            <UserIcon />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCardIcon />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <SettingsIcon />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</div>
```

## Groups

A command menu with groups, icons and separators.

```astro title="src/components/examples/command/command-groups.astro"
---
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 {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { DialogTrigger } from "@/components/ui/dialog"
---

<div class="flex flex-col gap-4">
  <CommandDialog>
    <DialogTrigger slot="trigger" variant="outline" class="w-fit">
      Open Menu
    </DialogTrigger>
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <SmileIcon />
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem>
            <CalculatorIcon />
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <UserIcon />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCardIcon />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <SettingsIcon />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</div>
```

## Scrollable

Scrollable command menu with multiple items.

```astro title="src/components/examples/command/command-scrollable.astro"
---
import BellIcon from "@lucide/astro/icons/bell"
import CalculatorIcon from "@lucide/astro/icons/calculator"
import CalendarIcon from "@lucide/astro/icons/calendar"
import HelpCircleIcon from "@lucide/astro/icons/circle-question-mark"
import ClipboardPasteIcon from "@lucide/astro/icons/clipboard-paste"
import CodeIcon from "@lucide/astro/icons/code"
import CopyIcon from "@lucide/astro/icons/copy"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import FileTextIcon from "@lucide/astro/icons/file-text"
import FolderIcon from "@lucide/astro/icons/folder"
import FolderPlusIcon from "@lucide/astro/icons/folder-plus"
import HomeIcon from "@lucide/astro/icons/house"
import ImageIcon from "@lucide/astro/icons/image"
import InboxIcon from "@lucide/astro/icons/inbox"
import LayoutGridIcon from "@lucide/astro/icons/layout-grid"
import ListIcon from "@lucide/astro/icons/list"
import PlusIcon from "@lucide/astro/icons/plus"
import ScissorsIcon from "@lucide/astro/icons/scissors"
import SettingsIcon from "@lucide/astro/icons/settings"
import TrashIcon from "@lucide/astro/icons/trash"
import UserIcon from "@lucide/astro/icons/user"
import ZoomInIcon from "@lucide/astro/icons/zoom-in"
import ZoomOutIcon from "@lucide/astro/icons/zoom-out"

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

<div class="flex flex-col gap-4">
  <CommandDialog>
    <DialogTrigger slot="trigger" variant="outline" class="w-fit">
      Open Menu
    </DialogTrigger>
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Navigation">
          <CommandItem>
            <HomeIcon />
            <span>Home</span>
            <CommandShortcut>⌘H</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <InboxIcon />
            <span>Inbox</span>
            <CommandShortcut>⌘I</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <FileTextIcon />
            <span>Documents</span>
            <CommandShortcut>⌘D</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <FolderIcon />
            <span>Folders</span>
            <CommandShortcut>⌘F</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem>
            <PlusIcon />
            <span>New File</span>
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <FolderPlusIcon />
            <span>New Folder</span>
            <CommandShortcut>⇧⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CopyIcon />
            <span>Copy</span>
            <CommandShortcut>⌘C</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <ScissorsIcon />
            <span>Cut</span>
            <CommandShortcut>⌘X</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <ClipboardPasteIcon />
            <span>Paste</span>
            <CommandShortcut>⌘V</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <TrashIcon />
            <span>Delete</span>
            <CommandShortcut>⌫</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="View">
          <CommandItem>
            <LayoutGridIcon />
            <span>Grid View</span>
          </CommandItem>
          <CommandItem>
            <ListIcon />
            <span>List View</span>
          </CommandItem>
          <CommandItem>
            <ZoomInIcon />
            <span>Zoom In</span>
            <CommandShortcut>⌘+</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <ZoomOutIcon />
            <span>Zoom Out</span>
            <CommandShortcut>⌘-</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Account">
          <CommandItem>
            <UserIcon />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCardIcon />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <SettingsIcon />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <BellIcon />
            <span>Notifications</span>
          </CommandItem>
          <CommandItem>
            <HelpCircleIcon />
            <span>Help & Support</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Tools">
          <CommandItem>
            <CalculatorIcon />
            <span>Calculator</span>
          </CommandItem>
          <CommandItem>
            <CalendarIcon />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <ImageIcon />
            <span>Image Editor</span>
          </CommandItem>
          <CommandItem>
            <CodeIcon />
            <span>Code Editor</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</div>
```

## RTL

```astro title="src/components/examples/command/command-rtl.astro"
---
import Calculator from "@lucide/astro/icons/calculator"
import Calendar from "@lucide/astro/icons/calendar"
import CreditCard from "@lucide/astro/icons/credit-card"
import Smile from "@lucide/astro/icons/face-slightly-smiling"
import Settings from "@lucide/astro/icons/settings"
import User from "@lucide/astro/icons/user"

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

const translations = {
  en: {
    dir: "ltr",
    values: {
      placeholder: "Type a command or search...",
      empty: "No results found.",
      suggestions: "Suggestions",
      calendar: "Calendar",
      searchEmoji: "Search Emoji",
      calculator: "Calculator",
      settings: "Settings",
      profile: "Profile",
      billing: "Billing",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      placeholder: "اكتب أمرًا أو ابحث...",
      empty: "لم يتم العثور على نتائج.",
      suggestions: "اقتراحات",
      calendar: "التقويم",
      searchEmoji: "البحث عن الرموز التعبيرية",
      calculator: "الآلة الحاسبة",
      settings: "الإعدادات",
      profile: "الملف الشخصي",
      billing: "الفوترة",
    },
  },
  he: {
    dir: "rtl",
    values: {
      placeholder: "הקלד פקודה או חפש...",
      empty: "לא נמצאו תוצאות.",
      suggestions: "הצעות",
      calendar: "לוח שנה",
      searchEmoji: "חפש אמוג'י",
      calculator: "מחשבון",
      settings: "הגדרות",
      profile: "פרופיל",
      billing: "חיוב",
    },
  },
}

const { dir, values: t } = translations.ar
---

<Command class="max-w-sm rounded-lg border" dir={dir}>
  <CommandInput placeholder={t.placeholder} dir={dir} />
  <CommandList>
    <CommandEmpty>{t.empty}</CommandEmpty>
    <CommandGroup heading={t.suggestions}>
      <CommandItem>
        <Calendar />
        <span>{t.calendar}</span>
      </CommandItem>
      <CommandItem>
        <Smile />
        <span>{t.searchEmoji}</span>
      </CommandItem>
      <CommandItem disabled>
        <Calculator />
        <span>{t.calculator}</span>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading={t.settings}>
      <CommandItem>
        <User />
        <span>{t.profile}</span>
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <CreditCard />
        <span>{t.billing}</span>
        <CommandShortcut>⌘B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <Settings />
        <span>{t.settings}</span>
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```

## API Reference

Source: [`src/components/ui/command`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/command)

| `Command` prop            | Type      | Description                             |
| ------------------------- | --------- | --------------------------------------- |
| `label`                   | `string`  | Accessible label                        |
| `defaultValue`            | `string`  | Initially selected item value           |
| `defaultSearch`           | `string`  | Initial search text                     |
| `shouldFilter`            | `boolean` | Set `false` to filter items yourself    |
| `loop`                    | `boolean` | Wrap keyboard navigation                |
| `disablePointerSelection` | `boolean` | Do not select items on hover            |
| `vimBindings`             | `boolean` | Ctrl+J/K/N/P navigation (on by default) |

| `CommandItem` prop | Type                 | Description                      |
| ------------------ | -------------------- | -------------------------------- |
| `value`            | `string`             | Value used for filtering         |
| `keywords`         | `string \| string[]` | Extra search terms               |
| `disabled`         | `boolean`            | Not selectable                   |
| `href`             | `string`             | Render a link                    |
| `forceMount`       | `boolean`            | Always visible, even if filtered |

`CommandGroup` takes `heading`, `value` and `forceMount`. `CommandDialog` takes
the `Dialog` props plus `title`, `description` (screen reader only),
`contentClass` and `showCloseButton` (default `false`). See the
[Data Slot docs](https://github.com/bejamas/data-slot/blob/main/packages/command/README.md)
for events.

## Install what this page shows

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