On this page
Create new file
Create new folder
Open file
Props
<Command className="w-[300px]">
<CommandInput aria-label="Search commands" />
<CommandContent>
<CommandSection>
<CommandSectionHeader>Actions</CommandSectionHeader>
<CommandItem textValue="Create new file">Create new file</CommandItem>
<CommandItem textValue="Create new folder">Create new folder</CommandItem>
<CommandItem textValue="Open file">Open file</CommandItem>
</CommandSection>
</CommandContent>
</Command>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/commandUsage
Use 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>Examples
Calendar
Search Emoji
Calculator
Profile⌘P
Billing⌘B
Settings⌘S
API Reference
Command
A command palette combines a search input with a list of commands, allowing a user to filter and run them.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
CommandInput
The search input used to filter the commands.
| Prop | Type | Default | |
|---|---|---|---|
string | — | ||
boolean | — | ||
boolean | — | ||
string | — | ||
ReactNode | function | — | ||
union | — | ||
union | — | ||
string | — | ||
union | 'search' | ||
string | — | ||
string | — | ||
function | — | ||
CommandContent
Contains the command items, filtered to match the input's value.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
DragAndDropHooks<NoInfer<T>> | — | ||
"grid" | "stack" | 'stack' | ||
Orientation | 'vertical' | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
function | — | ||
readonly any[] | — | ||
SelectionMode | — | ||
SelectionBehavior | 'toggle' | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
boolean | — | ||
"clearSelection" | "none" | 'clearSelection' | ||
Last updated on 6/16/2026