Command
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Command component provides a fast, composable, unstyled command menu for React. Built on top of cmdk, it's perfect for creating command palettes, search interfaces, and quick action menus.
Basic Usage
No results found.
Calendar
Search Emoji
Calculator
With Icons and Shortcuts
No results found.
Calendar
Calculator
Profile⌘P
Billing⌘B
Settings⌘S
Command Dialog
File Search Example
No files found.
README.mdfile
package.jsonfile
srcfolder
componentsfolder
App.tsxfile
index.htmlfile
Properties
Command
| Property | Type | Description |
|---|---|---|
className | string | Additional CSS classes. |
children | ReactNode | Command content. |
CommandDialog
| Property | Type | Description |
|---|---|---|
open | boolean | Whether the dialog is open. |
onOpenChange | (open: boolean) => void | Callback when open state changes. |
children | ReactNode | Dialog content. |
CommandInput
| Property | Type | Description |
|---|---|---|
placeholder | string | Input placeholder text. |
value | string | Input value (controlled). |
onValueChange | (value: string) => void | Callback when value changes. |
CommandItem
| Property | Type | Description |
|---|---|---|
onSelect | () => void | Callback when item is selected. |
disabled | boolean | Whether the item is disabled. |
value | string | Item value for filtering. |
children | ReactNode | Item content. |
CommandGroup
| Property | Type | Description |
|---|---|---|
heading | string | Group heading text. |
children | ReactNode | Group items. |
CommandShortcut
| Property | Type | Description |
|---|---|---|
children | ReactNode | Shortcut text (e.g., "⌘K"). |
Features
Fast Filtering
- Built-in fuzzy search and filtering
- Instant results as you type
- Customizable search algorithm
Keyboard Navigation
- Arrow keys to navigate items
- Enter to select items
- Escape to close dialog
- Tab to cycle through groups
Accessibility
- Full screen reader support
- Proper ARIA attributes
- Focus management
- Keyboard shortcuts
Customization
- Unstyled by default
- Easy to theme and customize
- Flexible component composition
Common Use Cases
The Command component is perfect for:
- Command palettes - Quick access to app functions
- File search - Navigate through project files
- Global search - Search across different content types
- Quick actions - Keyboard shortcuts for power users
- Navigation menus - Fast navigation between pages
- Settings search - Find specific configuration options
- Documentation search - Search through help content
Best Practices
- Provide clear shortcuts - Use recognizable keyboard shortcuts
- Group related items - Organize commands into logical groups
- Include icons - Visual cues help with recognition
- Keep it fast - Ensure search results appear instantly
- Handle empty states - Provide helpful "no results" messages
- Use consistent naming - Keep command names predictable
- Test keyboard navigation - Ensure full keyboard accessibility