Command

Fast, composable, command menu for React.

import { CalendarIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react";

import {
  Command,
  CommandEmpty,
  CommandGroup,

Installation


$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/command.json

Usage

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

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   └── CommandItem
    │       └── CommandShortcut
    └── CommandSeparator

Examples

Groups & Shortcuts

Group related items with CommandGroup and annotate them with CommandShortcut.

import { CalendarIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react";

import {
  Command,
  CommandEmpty,
  CommandGroup,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { CalendarIcon, SettingsIcon, SmileIcon, UserIcon } from "lucide-react";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";

API Reference

See the cmdk documentation for more information.

Combobox Context Menu

On This Page

Installation Usage Composition Examples Groups & Shortcuts RTL API Reference

Edit this page Follow @shadcnlabs Join community