Command

Command provides the root container for cmdk and applies the base styles. Import from "@desk/ui/components/command".

Usage

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

Best practices

For a ⌘K overlay wrap Command in CommandDialog — Command alone is the inline, non-floating palette container.
Compose CommandInput/CommandList/CommandGroup/CommandItem inside; a plain click-triggered action menu is DropdownMenu.

Props

Prop	Type	Description
title	`string`	Accessible title for the dialog (visually hidden by default).
description	`string`	Accessible description for the dialog (visually hidden by default).
className	`string`	Extra class names applied to the `DialogContent` wrapper.
showCloseButton	`boolean`	Whether to show the dialog close button.
shouldFilter	`boolean`	When `false`, disables cmdk's built-in filtering.
contentProps	`Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement> & import("../dialog/dialog-content").DialogContentExtras, "children"> & React.HTMLAttributes<HTMLDivEleme`	Extra props applied to the rendered dialog content element.

Also exports

componentCommand
constcommandAnatomy
componentCommandEmpty
componentCommandGroup
componentCommandInput
componentCommandItem
componentCommandList
componentCommandSeparator
componentCommandShortcut

Anatomy

Command

command

Command palette / search interface

CommandInput

command-input

Search input field

CommandList

command-list

Results container

CommandEmpty

command-empty

No results message

CommandGroup

command-group

Grouped items with heading

CommandItem

command-item

Selectable command item

CommandSeparator

command-separator

Visual divider

CommandShortcut

command-shortcut

Keyboard shortcut hint

Composition

Builds on

Dialog, Icon

Used by

Combobox, DataGridColumnFilter