Command Palette

Searchable command interface for quick actions and navigation

Command Palette

The Command Palette component provides a searchable, keyboard-accessible interface for quick actions, navigation, and commands. Similar to VS Code's Command Palette or Spotlight on macOS.

Installation

Add the command palette component to your project:

npx velyx add command-palette
pnpm dlx velyx add command-palette
yarn dlx velyx add command-palette
bunx --bun velyx add command-palette

Alpine.js Required: The command palette component requires Alpine.js for interactivity. Make sure Alpine.js is installed in your project.

Usage

Default Command Palette

Loading preview...

Failed to load preview

Code

Custom Placeholder

Loading preview...

Failed to load preview

Code

With Icons

Loading preview...

Failed to load preview

Code

With Sections

Loading preview...

Failed to load preview

Code

With Keyboard Shortcuts

Loading preview...

Failed to load preview

Code

Props

Prop Type Default Description
open boolean false Whether the command palette is open
placeholder string 'Search commands, files...' Placeholder text for the search input

Keyboard Shortcuts

The command palette includes built-in keyboard shortcuts:

Shortcut Action
⌘K / Ctrl+K Open the command palette
Escape Close the command palette
↑ / ↓ Navigate through items
Enter Select focused item

Examples

Basic Usage

<x-ui.command-palette :open="true">
    <ul class="p-2">
        <li class="hover:bg-muted rounded-md px-3 py-2 text-sm">
            Command 1
        </li>
        <li class="hover:bg-muted rounded-md px-3 py-2 text-sm">
            Command 2
        </li>
    </ul>
</x-ui.command-palette>

With Custom Placeholder

<x-ui.command-palette
    :open="true"
    placeholder="Search components..."
>
    <ul class="p-2">
        <li>Button</li>
        <li>Alert</li>
    </ul>
</x-ui.command-palette>

Controlled with Alpine.js

<div x-data="{ open: false }">
    <button @click="open = true">Open (⌘K)</button>

    <x-ui.command-palette :open="open">
        <ul class="p-2">
            <li>Command 1</li>
            <li>Command 2</li>
        </ul>
    </x-ui.command-palette>
</div>

With Livewire Integration

<div x-data="{ open: @entangle($open) }">
    <button @click="open = true">Toggle Palette</button>

    <x-ui.command-palette :open="open">
        <ul class="p-2">
            <li wire:click="handleAction('settings')">
                Settings
            </li>
            <li wire:click="handleAction('logout')">
                Logout
            </li>
        </ul>
    </x-ui.command-palette>
</div>

Accessibility

The Command Palette component includes proper ARIA attributes and keyboard support:

  • Role: Dialog with aria-modal="true"
  • Focus Management: Auto-focuses search input when opened
  • Keyboard Navigation: Full keyboard support for navigation and selection
  • Escape Key: Closes the palette
  • Screen Reader: Proper labels and roles for assistive technologies

Notes

  • The component uses Alpine.js for state management and interactivity
  • The open prop controls the visibility - use x-data or @entangle for dynamic control
  • The footer shows helpful keyboard shortcuts by default
  • Items can contain any content including icons, descriptions, and keyboard shortcuts
  • Maximum height of results area is 320px with scroll overflow

Next Steps