Command
Fast, composable, unstyled command menu for React.
Installation
npx shadcn@latest add @uqudo/commandInstalling it also installs Dialog and Input Group, which it depends on. Filtering and keyboard navigation come from cmdk.
Usage
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from "@/components/uqudo/ui/command"<Command>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>Calendar</CommandItem>
<CommandItem>Search Emoji</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
Profile
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>Typing in CommandInput filters the items by their text content. Handle a
selection with onSelect on CommandItem.
Examples
Dialog
CommandDialog renders the menu inside a Dialog.
Control it with open / onOpenChange, typically bound to a keyboard shortcut.
Command Palette
Search for a command to run...
API Reference
Command
Prop
Type
CommandDialog
Prop
Type
CommandInput
Prop
Type
CommandItem
Prop
Type
Other parts
| Component | Wraps | Notes |
|---|---|---|
CommandList | Command.List | Scrollable container, max-h-72. |
CommandEmpty | Command.Empty | Shown when nothing matches the search. |
CommandGroup | Command.Group | Accepts heading for a small label above its items. |
CommandSeparator | Command.Separator | Horizontal rule between groups. |
CommandShortcut | <span> | Right-aligned muted text for a keyboard shortcut. |