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@latest add command-palette

pnpm dlx velyx@latest add command-palette

yarn dlx velyx@latest add command-palette

bunx --bun velyx@latest add command-palette

Usage

Default Command Palette

<x-ui.command-palette :open="true">
        

            

                Open settings
            
            

                Search components
            
            

                Go to dashboard
            
        
    </x-ui.command-palette>

Custom Placeholder

<x-ui.command-palette :open="true" placeholder="Search components...">
        

            

                Button component
            
            

                Alert component
            
            

                Dialog component
            
        
    </x-ui.command-palette>

With Icons

<x-ui.command-palette :open="true" placeholder="Search actions...">
        

            

                
                Open settings
            
            

                
                Search files
            
            

                
                Go to dashboard
            
        
    </x-ui.command-palette>

With Sections

<x-ui.command-palette :open="true" placeholder="Type a command or search...">
        

            

                General
            
            

                Open settings
            
            

                View documentation
            


        <li class="text-muted-foreground px-3 py-1.5 text-xs font-semibold mt-2">
            Navigation
        </li>
        <li class="text-foreground hover:bg-muted rounded-md px-3 py-2 text-sm">
            Go to dashboard
        </li>
        <li class="text-foreground hover:bg-muted rounded-md px-3 py-2 text-sm">
            View all components
        </li>

        <li class="text-muted-foreground px-3 py-1.5 text-xs font-semibold mt-2">
            Account
        </li>
        <li class="text-foreground hover:bg-muted rounded-md px-3 py-2 text-sm">
            Sign out
        </li>
    </ul>
</x-ui.command-palette>

With Keyboard Shortcuts

<x-ui.command-palette :open="true" placeholder="Search...">
        

            

                Open settings
                ⌘S
            
            

                Save changes
                ⌘K
            
            

                New project
                ⌘N
            
        
    </x-ui.command-palette>

Props

Keyboard Shortcuts

The command palette includes built-in keyboard shortcuts:

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

• Explore Dialog component
• Learn about Dropdown component
• View Input component