Command
Command palette component for quick actions and navigation with keyboard support
Basic Usage
The command palette opens with a keyboard shortcut (default: Ctrl+K or Cmd+K) and displays a searchable list of commands:
Press Ctrl+K (or Cmd+K on Mac) to open the command palette
No results found
<neura::command
:commands="[
['id' => 'home', 'name' => 'Go to Home', 'description' => 'Navigate to the home page', 'href' => '#'],
['id' => 'profile', 'name' => 'View Profile', 'description' => 'Open your user profile', 'href' => '#'],
['id' => 'settings', 'name' => 'Settings', 'description' => 'Open application settings', 'href' => '#'],
]"
placeholder="Search commands..."
/>Commands with Icons
You can add icons to your commands to make them more visually appealing and easier to scan:
Press Ctrl+I (or Cmd+I) to open this example
No results found
<neura::command
:commands="[
['id' => 'home', 'name' => 'Go to Home', 'description' => 'Navigate to the home page', 'icon' => 'home', 'href' => '#'],
['id' => 'profile', 'name' => 'View Profile', 'description' => 'Open your user profile', 'icon' => 'user', 'href' => '#'],
['id' => 'settings', 'name' => 'Settings', 'description' => 'Open application settings', 'icon' => 'cog-6-tooth', 'href' => '#'],
['id' => 'docs', 'name' => 'Documentation', 'description' => 'View documentation', 'icon' => 'book-open', 'href' => '#'],
]"
placeholder="Search commands..."
/>Commands with Keyboard Shortcuts
Display keyboard shortcuts next to commands. Note: These shortcuts work automatically when the command palette is open.
Press Ctrl+S (or Cmd+S) to open this example. Then try pressing Ctrl+H to trigger "Go to Home".
No results found
<neura::command
:commands="[
[
'id' => 'save',
'name' => 'Save',
'description' => 'Save the current document',
'icon' => 'floppy-disk',
'shortcut' => 'Ctrl+S',
'action' => 'alert(\'Saved!\')'
],
[
'id' => 'new',
'name' => 'New File',
'description' => 'Create a new file',
'icon' => 'document-plus',
'shortcut' => 'Ctrl+N',
'action' => 'alert(\'New file!\')'
],
]"
placeholder="Search commands..."
/>Livewire Integration
The command palette integrates seamlessly with Livewire for both actions and navigation.
Livewire Navigation (SPA)
Use the `navigate` option to enable SPA-like navigation using `Wire:navigate`.
<neura::command
:commands="[
['id' => 'dashboard', 'name' => 'Dashboard', 'href' => '/dashboard', 'navigate' => true],
['id' => 'users', 'name' => 'Users', 'href' => '/users', 'navigate' => true],
]"
/>Calling Livewire Methods
Use `wireClick` to call a method on the parent Livewire component.
<neura::command
:commands="[
['id' => 'refresh', 'name' => 'Refresh Data', 'wireClick' => 'refresh'],
['id' => 'delete', 'name' => 'Delete Item', 'wireClick' => 'delete(123)'],
]"
/>Properties
| Property | Type | Default | Description |
|---|---|---|---|
| commands | array | [] | Array of command objects |
| placeholder | string | 'Search...' | Placeholder text |
| shortcuts | array | ['k'] | Keys to toggle the palette |
Command Object Structure
| Property | Type | Description |
|---|---|---|
| id | string | Unique identifier (required) |
| name | string | Display name (required) |
| description | string | Helper text |
| icon | string | Icon name |
| shortcut | string | Key combo (e.g. 'Ctrl+S'). Active when open. |
| href | string | Navigation URL |
| navigate | boolean | Use Livewire SPA navigation (requires href) |
| action | string/fn | JS code or function to execute |
| wireClick | string | Livewire method to call (e.g. 'save') |