Command
Command palette with fuzzy search, groups, keyboard shortcuts, and empty state.
Install
Import path
Examples
Command dialog
The same palette in a modal — the most common ⌘K pattern.
Press ⌘J
Command Palette
Search for a command to run...
Basic
A simple command menu in a dialog.
Command Palette
Search for a command to run...
Groups
A command menu with groups, icons and separators.
Command Palette
Search for a command to run...
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Scrollable
Scrollable command menu with multiple items.
Command Palette
Search for a command to run...
Shortcuts
Command menu for search and quick actions.
Command Palette
Search for a command to run...
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Command, CommandInput, CommandList,
CommandEmpty, CommandGroup, CommandItem,
} from "@codefast/ui/command";
<Command>
<CommandInput placeholder="Search…" />
<CommandList>
<CommandEmpty>No results.</CommandEmpty>
<CommandGroup heading="…">
<CommandItem onSelect={run}>…</CommandItem>
</CommandGroup>
</CommandList>
</Command>
API reference
Props for each part of the component. All native element props are also forwarded.
Command
Built on cmdk. Filters items by the input as you type.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string / (value: string) => void | — | Control the highlighted item. |
| shouldFilter | boolean | true | Turn off built-in filtering to filter server-side. |
CommandItem
| Prop | Type | Default | Description |
|---|---|---|---|
| onSelect | (value: string) => void | — | Runs when the item is chosen by click or Enter. |
| disabled | boolean | false | Skip the item during filtering and keyboard nav. |
CommandDialog
Command inside a Dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Control the modal palette’s visibility. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Arrow+Down | Highlights the next item. |
| Arrow+Up | Highlights the previous item. |
| Enter | Runs the highlighted item. |
| Esc | Closes the command dialog. |
- The input is a combobox controlling a listbox; highlighting is announced.
- Always provide a CommandEmpty so an empty search is communicated.
- Bind ⌘K / Ctrl+K to open the dialog in real apps — shown here as a hint only.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Group commands and add a short heading per group.
- Show shortcuts with CommandShortcut so power users learn them.
Don’t
- Don’t hide the only path to an action behind the palette.
- Don’t list hundreds of flat items without groups or search hints.