Command

"use client";
import {
	CalculatorIcon,
	CalendarIcon,
	CreditCardIcon,
	SettingsIcon,
	SmileIcon,
	UserIcon,
} from "lucide-react";

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

export function CommandDemo() {
	return (
		<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 disabled>
						<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>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/command.json

Usage

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

<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>
    <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.

"use client";

import {
	CalculatorIcon,
	CalendarIcon,
	CreditCardIcon,
	SettingsIcon,
	SmileIcon,
	UserIcon,
} from "lucide-react";
import * as React from "react";

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

export function CommandBasic() {
	const [open, setOpen] = React.useState(false);

	return (
		<div className="flex flex-col gap-4">
			<Button
				onClick={() => setOpen(true)}
				variant="tertiary"
				className="w-fit"
			>
				Open Menu
			</Button>
			<CommandDialog open={open} onOpenChange={setOpen}>
				<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 disabled>
								<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>
	);
}

Shortcuts

"use client";

import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react";
import * as React from "react";

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

export function CommandShortcuts() {
	const [open, setOpen] = React.useState(false);

	return (
		<div className="flex flex-col gap-4">
			<Button
				onClick={() => setOpen(true)}
				variant="tertiary"
				className="w-fit"
			>
				Open Menu
			</Button>
			<CommandDialog open={open} onOpenChange={setOpen}>
				<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.

"use client";

import {
	CalculatorIcon,
	CalendarIcon,
	CreditCardIcon,
	SettingsIcon,
	SmileIcon,
	UserIcon,
} from "lucide-react";
import * as React from "react";

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

export function CommandGroups() {
	const [open, setOpen] = React.useState(false);

	return (
		<div className="flex flex-col gap-4">
			<Button
				onClick={() => setOpen(true)}
				variant="tertiary"
				className="w-fit"
			>
				Open Menu
			</Button>
			<CommandDialog open={open} onOpenChange={setOpen}>
				<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.

"use client";

import {
	BellIcon,
	CalculatorIcon,
	CalendarIcon,
	ClipboardPasteIcon,
	CodeIcon,
	CopyIcon,
	CreditCardIcon,
	FileTextIcon,
	FolderIcon,
	FolderPlusIcon,
	HelpCircleIcon,
	HomeIcon,
	ImageIcon,
	InboxIcon,
	LayoutGridIcon,
	ListIcon,
	PlusIcon,
	ScissorsIcon,
	SettingsIcon,
	Trash2Icon,
	UserIcon,
	ZoomInIcon,
	ZoomOutIcon,
} from "lucide-react";
import * as React from "react";

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

export function CommandManyItems() {
	const [open, setOpen] = React.useState(false);

	return (
		<div className="flex flex-col gap-4">
			<Button
				onClick={() => setOpen(true)}
				variant="tertiary"
				className="w-fit"
			>
				Open Menu
			</Button>
			<CommandDialog open={open} onOpenChange={setOpen}>
				<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>
								<Trash2Icon />
								<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 &amp; 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>
	);
}

Overlay Variant

Use overlayVariant on CommandDialog to choose an opaque dim (opaque), a blurred backdrop (blur), or a transparent overlay (transparent).

"use client";

import * as React from "react";

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

export function CommandOverlayVariant() {
	const [openOpaque, setOpenOpaque] = React.useState(false);
	const [openBlur, setOpenBlur] = React.useState(false);
	const [openTransparent, setOpenTransparent] = React.useState(false);

	return (
		<div className="flex flex-wrap gap-2">
			<Button
				onClick={() => setOpenOpaque(true)}
				variant="tertiary"
				className="w-fit"
			>
				Opaque
			</Button>
			<Button
				onClick={() => setOpenBlur(true)}
				variant="tertiary"
				className="w-fit"
			>
				Blur
			</Button>
			<Button
				onClick={() => setOpenTransparent(true)}
				variant="tertiary"
				className="w-fit"
			>
				Transparent
			</Button>
			<CommandDialog
				open={openOpaque}
				onOpenChange={setOpenOpaque}
				overlayVariant="opaque"
			>
				<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>
			<CommandDialog
				open={openBlur}
				onOpenChange={setOpenBlur}
				overlayVariant="blur"
			>
				<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>
			<CommandDialog
				open={openTransparent}
				onOpenChange={setOpenTransparent}
				overlayVariant="transparent"
			>
				<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>
	);
}

RTL

"use client";
import {
	CalculatorIcon,
	CalendarIcon,
	CreditCardIcon,
	SettingsIcon,
	SmileIcon,
	UserIcon,
} from "lucide-react";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
	CommandSeparator,
	CommandShortcut,
} from "@/components/ui/command";

const translations: 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: "חיוב",
		},
	},
};

export function CommandRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div className="w-full" lang={language} dir={dir}>
			<Command>
				<CommandInput placeholder={t.placeholder} />
				<CommandList>
					<CommandEmpty>{t.empty}</CommandEmpty>
					<CommandGroup heading={t.suggestions}>
						<CommandItem>
							<CalendarIcon />
							<span>{t.calendar}</span>
						</CommandItem>
						<CommandItem>
							<SmileIcon />
							<span>{t.searchEmoji}</span>
						</CommandItem>
						<CommandItem disabled>
							<CalculatorIcon />
							<span>{t.calculator}</span>
						</CommandItem>
					</CommandGroup>
					<CommandSeparator />
					<CommandGroup heading={t.settings}>
						<CommandItem>
							<UserIcon />
							<span>{t.profile}</span>
							<CommandShortcut>⌘P</CommandShortcut>
						</CommandItem>
						<CommandItem>
							<CreditCardIcon />
							<span>{t.billing}</span>
							<CommandShortcut>⌘B</CommandShortcut>
						</CommandItem>
						<CommandItem>
							<SettingsIcon />
							<span>{t.settings}</span>
							<CommandShortcut>⌘S</CommandShortcut>
						</CommandItem>
					</CommandGroup>
				</CommandList>
			</Command>
		</div>
	);
}

API Reference

See the cmdk documentation for more information.

Command

Command Palette

Command Palette

Command Palette

Command Palette

Command Palette

Command Palette

Command Palette