Command
A command palette with search, filtering, and keyboard navigation.
Import
import {
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandSeparator,
} from "@retents/ui/command"Usage Guidelines
When to use
- For searchable command palettes or action launchers (e.g.,
Cmd+Kworkflows). - For searchable selection lists where users need to filter through many items.
- When you want grouped, keyboard-navigable results with real-time filtering.
When NOT to use
- For simple dropdowns with a few items — use Select instead.
- For action menus triggered by a button — use DropdownMenu instead.
- For basic search inputs without grouped results — use Input with custom filtering.
Preview
No results found.
Calendar
Search Emoji
Calculator
Profile
Billing
Settings
Usage
<Command>
<CommandInput placeholder="Type a command..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>Calendar</CommandItem>
<CommandItem>Search</CommandItem>
<CommandItem>Settings</CommandItem>
</CommandGroup>
</CommandList>
</Command>Peer dependencies
This component requires: cmdk