Laravel Command Palette Component

Free · MIT

Keyboard-driven command launcher with search, grouping, and shortcut display, activated with Ctrl+K.

A Command Palette built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::command-palette>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<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>

See the full API, props and live examples in the Command Palette documentation.

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.

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.

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.