Command
View on StorybookStorybookFast, composable, command menu for React. Perfect for building search interfaces, command palettes, and quick actions.
Installation
Basic Command
No results found.
Calendar
Search Emoji
Calculator
Profile
Settings
Command Dialog
Opens in a dialog with keyboard shortcut support (Cmd/Ctrl + K):
RTL Considerations
The Command component automatically adjusts icon positions, text alignment, and keyboard navigation for RTL layouts. Try toggling the direction to see it in action.
Accessibility
• Fully keyboard navigable with arrow keys
• Screen reader friendly with proper ARIA labels
• Type-ahead search support
• Focus management in dialog mode
• Escape key closes the dialog
Use Cases
Command palettes (⌘K)
Global search interfaces
Quick action launchers
Searchable option pickers
Best Practices
Do
- ✓ Support keyboard-first navigation (arrows, Enter)
- ✓ Group commands by category with headings
- ✓ Show keyboard shortcuts alongside commands
Don't
- ✗ Don't include too many items without search filtering
- ✗ Don't use for simple selections — use Select
- ✗ Don't open automatically without user intent