Components Command

Purpose and Scope

The Command component is the shadcn/ui command palette pattern: a searchable menu for quick actions, navigation, and grouped choices. The docs present it consistently across ARIA, base, and Radix-backed registries, so application code can learn one composition model while choosing the implementation family that fits the project. In all three docs pages, the component is introduced as a command menu for search and quick actions, then shown with the same public names: Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, and CommandShortcut.

Sources: apps/v4/content/docs/components/aria/command.mdx, apps/v4/content/docs/components/base/command.mdx, apps/v4/content/docs/components/radix/command.mdx

This page is about the UI component named Command, not the repository's CLI command subsystem. The page also references the preset changelog because the repository contains docs for shadcn preset commands near the same terminology. That changelog is useful as a naming guardrail: user-facing docs should distinguish component composition from terminal commands such as preset decode, preset resolve, preset url, and preset open. Keeping that distinction clear helps readers avoid confusing a command palette rendered in React with CLI workflows executed through npx shadcn@latest.

Sources: apps/v4/content/docs/changelog/2026-04-preset-commands.mdx

Relevant Source Files

apps/v4/content/docs/components/aria/command.mdx - ARIA Command documentation, including installation, usage, composition, examples, RTL preview, and React Aria reference link.
apps/v4/content/docs/components/base/command.mdx - Base Command documentation, including the cmdk dependency, base style preview, usage, and composition tree.
apps/v4/content/docs/components/radix/command.mdx - Radix Command documentation, using the same cmdk-backed contract and Radix style preview.
apps/v4/registry/bases/aria/ui/command.tsx - ARIA registry implementation for Command primitives, including React Aria Autocomplete, SearchField, Menu, MenuSection, MenuItem, and Dialog integration.
apps/v4/content/docs/changelog/2026-04-preset-commands.mdx - Changelog entry for CLI preset commands; relevant for disambiguating component documentation from CLI command terminology.
apps/v4/components/code-block-command.tsx - Documentation UI helper that renders package-manager command tabs and copy behavior for command snippets.

The docs are intentionally registry-oriented. Each component page declares a base value in frontmatter, uses a matching styleName in previews, and then points manual installers at components/ui/command.tsx. The source implementation shown for the ARIA registry is copied into user projects rather than imported as a black-box package. That matches the repository's open-code model: the docs describe a public composition contract, while registry files provide source that teams can customize after installation.

Sources: apps/v4/content/docs/components/aria/command.mdx, apps/v4/content/docs/components/base/command.mdx, apps/v4/content/docs/components/radix/command.mdx, apps/v4/registry/bases/aria/ui/command.tsx

Core Primitives

A Command is built from a root container, a search input, and a list of selectable items. The shared composition tree starts with Command, then nests CommandInput and CommandList. Inside the list, examples use CommandGroup to create labeled sections, CommandItem for actions, and CommandSeparator to visually divide groups. Base and Radix examples include CommandEmpty directly inside CommandList; the ARIA example passes an empty-state renderer to CommandList, which returns CommandEmpty when there are no results.

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty or renderEmptyState
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

The named exports are designed to make command palettes readable in application code. CommandDialog wraps the palette in a modal dialog for the common launcher pattern. CommandShortcut is documented as part of the import surface, so examples can show keyboard hints beside actions. CommandEmpty gives no-result feedback. CommandGroup and CommandSeparator make larger command menus scannable, especially when mixing navigation, settings, and contextual actions in one searchable interface.

Sources: apps/v4/content/docs/components/aria/command.mdx, apps/v4/content/docs/components/base/command.mdx, apps/v4/content/docs/components/radix/command.mdx

Installation and Usage Flow

The fastest installation path is the same across ARIA, base, and Radix docs: run npx shadcn@latest add command. Manual installation differs by registry family because the underlying primitive library differs. The ARIA page installs react-aria-components and links to React Aria Autocomplete documentation. The base and Radix pages install cmdk and credit the cmdk component by Dip. After dependency installation, all manual flows ask readers to copy the generated components/ui/command.tsx source and update import paths for the project.

npx shadcn@latest add command

npm install react-aria-components
npm install cmdk

A minimal usage example imports the full command surface from the local UI alias, then renders a bordered command menu with an input, an empty state, suggestions, settings, and a separator. The important application-level decision is where filtering and empty-state rendering live. In the ARIA docs, CommandList receives renderEmptyState={() => <CommandEmpty>No results found.</CommandEmpty>}. In the base and Radix docs, CommandEmpty is a child of CommandList. Both patterns express the same user experience: type to search, show grouped matches, and show a clear fallback when nothing matches.

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

Sources: apps/v4/content/docs/components/aria/command.mdx, apps/v4/content/docs/components/base/command.mdx, apps/v4/content/docs/components/radix/command.mdx

System-to-Code Mapping

The ARIA registry implementation maps the documented primitives to React Aria building blocks. Command wraps Autocomplete and supplies a default filter from useFilter({ sensitivity: "base" }), so searches are case-insensitive and accent-insensitive by default unless callers provide their own filter. The wrapper also accepts dir, style, and className, then applies data-slot="command" and the cn-command styling hook. This is the bridge between the copyable component API and the accessible Autocomplete behavior supplied by React Aria.

Sources: apps/v4/registry/bases/aria/ui/command.tsx

CommandDialog composes the Command experience with the ARIA registry Dialog. Its props translate the public open and onOpenChange convention into Dialog's isOpen and onOpenChange props. It defaults the accessible title to "Command Palette" and description to "Search for a command to run...", hides that header visually with sr-only, and sets isDismissable. That implementation detail matters because command palettes often omit visible modal headings, but still need semantic labeling for screen readers.

Sources: apps/v4/registry/bases/aria/ui/command.tsx

CommandInput is implemented with SearchField and Input, then decorated with InputGroup, InputGroupAddon, and an IconPlaceholder search icon. It sets autoFocus, derives an aria-label from the placeholder or the fallback "Search", hides the WebKit search cancel button, and forwards input props. CommandList maps to React Aria Menu, while CommandGroup maps to MenuSection and can render a heading. These choices preserve the command-palette authoring style while delegating listbox, menu, and search semantics to React Aria.

Sources: apps/v4/registry/bases/aria/ui/command.tsx

API Components Reference

Component	Role	Source-backed behavior
`Command`	Root searchable command menu	ARIA implementation wraps `Autocomplete`, sets `data-slot="command"`, accepts `dir`, `style`, and `className`, and uses a default `contains` filter.
`CommandDialog`	Modal command palette shell	Wraps registry `Dialog`, maps `open` to `isOpen`, supports `onOpenChange`, defaults hidden title and description, and can hide the close button.
`CommandInput`	Search input	Uses `SearchField` and `Input`, auto-focuses, sets an accessible label, and renders a search icon in an input group.
`CommandList`	Results container	ARIA implementation uses React Aria `Menu`; docs show empty-state rendering in or around the list depending on base family.
`CommandEmpty`	No-results fallback	Rendered as a simple fallback element in base and Radix docs; ARIA docs commonly provide it through `renderEmptyState`.
`CommandGroup`	Labeled group of actions	Maps to grouped sections in the docs composition and to `MenuSection` in the ARIA implementation.
`CommandItem`	Selectable action	Documented as the repeated child used for actions such as Calendar, Search Emoji, Calculator, Profile, Billing, and Settings.
`CommandSeparator`	Visual divider	Separates suggestion and settings groups in the documented examples and maps to React Aria Separator in the ARIA implementation.
`CommandShortcut`	Keyboard hint display	Part of the documented import surface and used by shortcut examples.

The component pages also document example families rather than only API names. Basic shows a simple command menu in a dialog. Shortcuts demonstrates visible key hints. Groups combines icons, groups, and separators. Scrollable covers long result sets. RTL previews the component with direction="rtl" and points readers to the RTL configuration guide. Treat those examples as behavioral checkpoints when modifying local copies of the component: preserve keyboard search, grouping, empty state, scrolling, and right-to-left layout support.

Sources: apps/v4/content/docs/components/aria/command.mdx, apps/v4/content/docs/components/base/command.mdx, apps/v4/content/docs/components/radix/command.mdx

Documentation Command Snippets

The docs site has its own CodeBlockCommand component for rendering terminal commands in tabs. It is not the Command UI component, but it affects how installation snippets such as npx shadcn@latest add command are presented. The helper reads the configured package manager with useConfig, defaults to pnpm, builds tabs for pnpm, npm, yarn, and bun command strings, and writes package-manager changes back to config. Its copy button sends the selected command to copyToClipboardWithMeta with analytics metadata named copy_npm_command.

Sources: apps/v4/components/code-block-command.tsx

This helper explains why command snippets in the docs feel stateful: readers can switch package managers once and keep seeing matching commands. The component also maintains short-lived copied state, resetting after two seconds, and renders accessible copy text through an sr-only label. For authors updating the Command docs, this means installation commands should remain accurate across package managers and should be written as shell commands, while component examples should remain TypeScript React snippets imported from @/components/ui/command.

Sources: apps/v4/components/code-block-command.tsx

Next Steps

Choose the ARIA Command when you want the React Aria Autocomplete model and the documented renderEmptyState flow. Choose the base or Radix pages when your project is already aligned with the cmdk-backed command palette implementation. In any registry family, install with the CLI first, inspect the copied components/ui/command.tsx, then adapt styles, item data, and dialog triggers locally. If your task is about terminal workflows instead, read the CLI and preset-command documentation rather than this component page.

Related pages: aria-components, base-components, radix-components, cli, registry-overview

Ask a question...