---
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
npx shadcn@latest add @fulldev/commandUsage
import {
Command,
CommandDialog,
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</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
Command
├── CommandInput
└── CommandList
├── CommandEmpty
├── CommandGroup
│ ├── CommandItem
│ └── CommandItem
├── CommandSeparator
└── CommandGroup
├── CommandItem
└── CommandItemCommand 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).
<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.
Command Palette
Search for a command to run...
---
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
Command Palette
Search for a command to run...
---
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.
Command Palette
Search for a command to run...
---
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.
Command Palette
Search for a command to run...
---
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
---
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
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
for events.