Command
Fast, composable, unstyled command menu for Vue.
Features
- ⚡ Fast & Responsive: Built on top of Radix Vue for ultimate interactive performance.
- 🧩 Highly Composable: Composed of multiple small components, flexible for various business scenarios.
- 🎨 Unstyled by Default: Provides a basic skeleton, easily customizable via Tailwind CSS.
- ⌨️ Keyboard Navigation: Fully accessible via keyboard, offering a smooth keyboard operation experience.
- 📋 Nested Support: Supports sub-commands and hierarchical navigation for complex command trees.
Basic Usage
No results found.
Example
Dialog
You can use the BrCommandDialog component to render the command menu in a dialog.
Press ⌘K or click the button below.
Example
Nested Commands
You can navigate between different command groups by changing the active page.
No results found.
Example
Global Shortcut
You can bind a global keyboard shortcut to open the command dialog.
Press ⌘K to open the command dialog.
Example
API
Command Props
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | true | The open state of the command menu. |
| modelValue | string | '' | The value of the selected item. |
| filterFunction | (val: any[], search: string) => any[] | - | Custom filter function. |
CommandInput Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | The search value. |
CommandItem Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | The value of the item. |
| disabled | boolean | false | Whether the item is disabled. |
CommandGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
| heading | string | - | The heading of the group. |
CommandDialog Props
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | The open state of the dialog. |