<Command>
<CommandInput />
<CommandContent className="min-h-48">
<CommandItem textValue="Create new file">Create new file...</CommandItem>
<CommandItem textValue="Create new folder">Create new folder...</CommandItem>
<CommandItem textValue="Assign to">Assign to...</CommandItem>
<CommandItem textValue="Assign to me">Assign to me</CommandItem>
<CommandItem textValue="Change status">Change status...</CommandItem>
<CommandItem textValue="Change priority">Change priority...</CommandItem>
<CommandItem textValue="Add label">Add label...</CommandItem>
<CommandItem textValue="Remove label">Remove label...</CommandItem>
</CommandContent>
</Command>npx shadcn@latest add @dotui/commandUse command menus to provide users with a searchable list of commands or actions.
import {
Command,
CommandContent,
CommandInput,
CommandItem,
} from "@/components/ui/command";<Command>
<CommandInput placeholder="Type a command..." />
<CommandContent>
<CommandItem textValue="Create file">Create new file</CommandItem>
<CommandItem textValue="Open file">Open file</CommandItem>
</CommandContent>
</Command>Use the controls below to experiment with different command props and see the live preview and code update.
<Command className="w-[300px]">
<CommandInput placeholder="Type a command..." />
<CommandContent>
<ListBoxSection>
<ListBoxSectionHeader>Actions</ListBoxSectionHeader>
<ListBoxItem textValue="Create new file">Create new file</ListBoxItem>
<ListBoxItem textValue="Create new folder">Create new folder</ListBoxItem>
<ListBoxItem textValue="Open file">Open file</ListBoxItem>
</ListBoxSection>
</CommandContent>
</Command>Missing description.
Supports all div attributes.
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
string | — | ||
boolean | — | ||
boolean | — | ||
union | — | ||
string | — | ||
string | — | ||
union | — | ||
union | 'search' | ||
ReactNode | function | — | ||
string | — | ||
string | — | ||
function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
boolean | — | ||
DragAndDropHooks<NoInfer<T>> | — | ||
"grid" | "stack" | 'stack' | ||
Orientation | 'vertical' | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
SelectionBehavior | "toggle" | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
"none" | "clearSelection" | 'clearSelection' | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.