Components
Command
An extensible and accessible command palette for your app, supporting search, navigation, and shortcuts.
Introduction
The Command component is a flexible and accessible command palette for your application. It can be used for navigation, search, or presenting actionable commands with keyboard shortcuts.
Default Use Case: Command Palette
No results found.
Calendar
Search Emoji
Calculator
Profile⌘P
Billing⌘B
Settings⌘S
Advanced Use Case: Command Dialog
Press ⌘K
Installation
Install the Command component using the following command:
File Structure
command.tsx
Prop Types
| Prop | Type | Default |
|---|---|---|
open | boolean | - |
placeholder | string | - |
children | React.ReactNode | - |
Features
- Search & Navigation: Quickly search or navigate to specific items.
- Keyboard Shortcuts: Includes built-in keyboard support for power users.
- Flexible Layout: Customize with groups, separators, and shortcuts.
- Accessible: Fully compliant with ARIA attributes.
Conclusion
The Command component is an essential addition to any modern application, offering flexible, accessible, and customizable command palettes and dialogs for a seamless user experience.