Command

React Command components are used to build fast, composable, and accessible command menus. They are essential for creating command palettes, search dialogs, and navigation shortcuts that improve user productivity.

This Command component is built with React and React Aria Components, ensuring high accessibility and smooth keyboard navigation. It supports filtering, grouping, keyboard shortcuts, and can be easily integrated into modal dialogs.

Installation

npx @tailgrids/cli add command

Anatomy

Import the component and pass the required props.

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut
} from "@/registry/core/command";

export function CommandDemo() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar className="mr-2 h-4 w-4" />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <Smile className="mr-2 h-4 w-4" />
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem>
            <Calculator className="mr-2 h-4 w-4" />
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <User className="mr-2 h-4 w-4" />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCard className="mr-2 h-4 w-4" />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings className="mr-2 h-4 w-4" />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Examples

Dialog

The CommandDialog component allows you to wrap the command menu in a modal dialog.

Complex Menu

An example of a more complex command menu with icons, descriptions, and grouped actions. Note the use of textValue for filtering.

File Search

A search-centric example focused on finding files and folders with metadata.

API Reference

Command

The root component of the command menu.

See useFilter for more information on filtration.

CommandInput

The search input field for the command menu.

CommandList

The container for the command items. It automatically detects and renders CommandEmpty if no results are found.

CommandDialog

A command menu wrapped in a modal dialog.

NOTE: CommandDialog includes built-in keyboard shortcuts: ⌘J (Mac) or Ctrl+J (Windows/Linux) to open, and Escape to close.

CommandEmpty

Displays a message when no search results are found.

CommandGroup

Groups related command items under a heading.

CommandItem

An individual item in the command menu.

CommandShortcut

Displays a keyboard shortcut hint for a command item.

CommandSeparator

A visual divider between items or groups.

Accessibility

• Keyboard Navigation: Use arrow keys to navigate between items.
• Filtering: Items are automatically filtered based on input.
• Screen Reader Support: Properly labeled with ARIA attributes.