Skip to content

Pro Component — This component requires an Aura UI Pro license.

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>

Note: The Command Palette is a dialog overlay activated via keyboard shortcut. It cannot be previewed inline — try pressing Ctrl+K on any page that includes this component.

Props

Command Palette

The root component has no configurable props. It manages the search state and open/close behavior 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.
  • 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.