Command

Command presents a filterable list of actions, destinations, or settings with fast keyboard navigation. It can be used inline or placed inside a dialog as a command palette.

Use it when experienced users benefit from searching across a varied set of actions. Keep essential navigation and controls available outside the palette so discoverability does not depend on knowing a shortcut.

Live previewInteractive / Local

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/command.json

Usage

Sourcetsx

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

<Command>
    <CommandInput placeholder="Search actions" aria-label="Search actions" />
    <CommandList>
        <CommandEmpty>No matching actions</CommandEmpty>
        <CommandGroup heading="Navigation">
            <CommandItem value="Open dashboard">
                Open dashboard
                <CommandShortcut>⌘D</CommandShortcut>
            </CommandItem>
            <CommandItem value="View deployments">
                View deployments
            </CommandItem>
        </CommandGroup>
    </CommandList>
</Command>

Dialog Palette

CommandDialog combines Command with the argv Dialog surface. Control it with open and onOpenChange, and render a complete Command composition as its child.

Sourcetsx

<CommandDialog open={open} onOpenChange={setOpen}>
    <Command>
        <CommandInput placeholder="Run a command" aria-label="Run a command" />
        <CommandList>
            <CommandEmpty>No matching commands</CommandEmpty>
            <CommandGroup heading="Actions">
                <CommandItem onSelect={() => setOpen(false)}>
                    Create deployment
                </CommandItem>
            </CommandGroup>
        </CommandList>
    </Command>
</CommandDialog>

CommandDialog accepts title and description for its accessible name and description. These values are visually hidden but announced by assistive technology. Set showCloseButton when a visible pointer dismissal control is useful; keyboard users can always press Escape.

Composition

Sourcetext

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

cmdk filters items using their value. Provide an explicit value when the visible children contain icons or other nested content. Handle selection with onSelect; for a palette, close the dialog after the action has run.

Set checked on CommandItem when the row represents a currently active option. Use CommandShortcut only to display an existing shortcut—the component does not register keyboard bindings.

API Reference

Command

Command forwards cmdk root props, including controlled value, onValueChange, custom filter, and shouldFilter.

CommandDialog

Prop	Type	Default
`title`	`string`	`"Command palette"`
`description`	`string`	`"Search for an action to run."`
`showCloseButton`	`boolean`	`false`
`open`	`boolean`	-
`onOpenChange`	function	-
`className`	`string`	-

CommandItem

Prop	Type	Default
`value`	`string`	inferred from text
`disabled`	`boolean`	`false`
`checked`	`boolean`	`false`
`onSelect`	`(value: string) => void`	-
`className`	`string`	-

CommandInput, CommandList, CommandEmpty, CommandGroup, and CommandSeparator forward the matching cmdk primitive props. CommandShortcut renders a kbd and forwards native keyboard-text element props.

Accessibility

Give CommandInput an aria-label unless it has a visible label. Write item values as clear action names and avoid using icons as the only label.

Arrow keys move through enabled items and Enter selects the active item. When opening CommandDialog from a custom shortcut, avoid overriding shortcuts already reserved by the browser or operating system.