Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add command-palette

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

The Command Palette component provides a spotlight-style search dialog for navigating your application, executing actions, and finding content. Activated with Ctrl+K (or Cmd+K on macOS), it displays a searchable list of commands organized into groups. Each item can have an icon, description, keyboard shortcut, and link or action.

Basic Usage

Place the component in your layout. It is hidden by default and opens with Ctrl+K (or Cmd+K on macOS).

<x-aura::command-palette>
    <x-aura::command-palette.group title="Navigation">
        <x-aura::command-palette.item
            title="Dashboard"
            icon="home"
            href="/dashboard"
        />
        <x-aura::command-palette.item
            title="Settings"
            icon="cog-6-tooth"
            href="/settings"
            shortcut="Ctrl+,"
        />
    </x-aura::command-palette.group>
</x-aura::command-palette>

Opening it without a keyboard

Ctrl+K is not available to someone on a phone, and a Livewire action cannot press it. Dispatch open-command-palette from anywhere instead:

<x-aura::button x-on:click="$dispatch('open-command-palette')">Search</x-aura::button>

<x-aura::command-palette />

From a Livewire component:

$this->dispatch('open-command-palette');

Give the palette a name when a page holds more than one, and send that name as the event detail — close-command-palette works the same way.

<x-aura::button x-on:click="$dispatch('open-command-palette', 'admin')">Admin commands</x-aura::button>

<x-aura::command-palette name="admin" />

Props

Command Palette

Prop Type Default Description
placeholder string Search commands... Placeholder text in the search field.
emptyText string No results found. Message shown when the search matches nothing.
shortcut string Cmd+K Shortcut hint displayed in the empty state.
name string|null null Identifies this palette so open-command-palette events can target it. Without a name it answers every such event.

Search state and open/close behaviour are managed internally via Alpine.js.

Command Palette Group

Prop Type Default Description
title string '' Group heading displayed above the group's items.

Command Palette Item

Prop Type Default Description
title string '' Primary text for the command.
description string|null null Secondary description text shown below the title.
icon string|null null Heroicon name displayed before the title.
shortcut string|null null Keyboard shortcut hint displayed on the right (e.g., Ctrl+S).
href string|null null URL to navigate to when the item is selected.

Examples

Full Application Command Palette

<x-aura::command-palette>
    <x-aura::command-palette.group title="Navigation">
        <x-aura::command-palette.item
            title="Dashboard"
            description="View your main dashboard"
            icon="home"
            href="/dashboard"
            shortcut="Ctrl+D"
        />
        <x-aura::command-palette.item
            title="Customers"
            description="Manage customer records"
            icon="users"
            href="/customers"
        />
        <x-aura::command-palette.item
            title="Orders"
            description="View and process orders"
            icon="shopping-bag"
            href="/orders"
        />
    </x-aura::command-palette.group>

    <x-aura::command-palette.group title="Actions">
        <x-aura::command-palette.item
            title="Create New Customer"
            icon="user-plus"
            href="/customers/create"
            shortcut="Ctrl+N"
        />
        <x-aura::command-palette.item
            title="Export Data"
            icon="arrow-down-tray"
            x-on:click="$wire.exportData()"
        />
    </x-aura::command-palette.group>

    <x-aura::command-palette.group title="Settings">
        <x-aura::command-palette.item
            title="Profile Settings"
            icon="user-circle"
            href="/settings/profile"
            shortcut="Ctrl+,"
        />
        <x-aura::command-palette.item
            title="Toggle Dark Mode"
            icon="moon"
            x-on:click="document.documentElement.classList.toggle('dark')"
        />
    </x-aura::command-palette.group>
</x-aura::command-palette>

<!-- Blade view -->
<x-aura::command-palette>
    <x-aura::command-palette.group title="Quick Actions">
        <x-aura::command-palette.item title="New Invoice" icon="document-plus" href="/invoices/create" />
        <x-aura::command-palette.item title="New Customer" icon="user-plus" href="/customers/create" />
    </x-aura::command-palette.group>

    @if(count($searchResults) > 0)
        <x-aura::command-palette.group title="Search Results">
            @foreach($searchResults as $result)
                <x-aura::command-palette.item
                    :title="$result['title']"
                    :description="$result['subtitle']"
                    :icon="$result['icon']"
                    :href="$result['url']"
                />
            @endforeach
        </x-aura::command-palette.group>
    @endif
</x-aura::command-palette>

Minimal Navigation Palette

<x-aura::command-palette>
    <x-aura::command-palette.group title="Go to">
        <x-aura::command-palette.item title="Home" icon="home" href="/" />
        <x-aura::command-palette.item title="About" icon="information-circle" href="/about" />
        <x-aura::command-palette.item title="Contact" icon="envelope" href="/contact" />
    </x-aura::command-palette.group>
</x-aura::command-palette>

<x-aura::command-palette>
    <x-aura::command-palette.group title="Account">
        <x-aura::command-palette.item
            title="Sign Out"
            icon="arrow-right-on-rectangle"
            x-on:click="document.getElementById('logout-form').submit()"
        />
        <x-aura::command-palette.item
            title="Switch Workspace"
            icon="arrows-right-left"
            x-on:click="$dispatch('open-modal', 'switch-workspace')"
        />
    </x-aura::command-palette.group>
</x-aura::command-palette>

Slots

Slot Component Description
default command-palette Contains command-palette.group children.
default command-palette.group Contains command-palette.item children.
default command-palette.item Not typically used; title and description come from props.

Accessibility

  • The palette dialog uses role="dialog" with aria-modal="true" and a descriptive aria-label.
  • The search input is auto-focused when the palette opens.
  • The results list uses role="listbox" with items as role="option".
  • aria-activedescendant tracks the currently highlighted item.
  • Ctrl+K / Cmd+K opens the palette from anywhere in the application, and the open-command-palette event does the same for anyone without a keyboard.
  • Arrow Up/Down navigate through items.
  • Enter selects the highlighted item (navigates or executes the action).
  • Escape closes the palette.
  • Keyboard shortcut hints are displayed as visual badges but also included in aria-label for each item.