macOS Spotlight-style command palette for quick navigation and search. Press Ctrl+K or Cmd+K to open.

Quick Start

Try it now! Click the button above or press Ctrl+K (Windows/Linux) or Cmd+K (Mac) to open the command palette.

Keyboard Shortcuts

Key Action
Ctrl+K / Cmd+K Open/close palette
↑ ↓ Navigate between results
← → Navigate between pages
Enter Select highlighted result
Esc Close palette

Context Switching

Use special prefixes to search within specific contexts:

Prefix Context Example
/p Products /p macbook
/o Orders /o 1001
/u Users /u john
/i Invoices /i 501
Pro tip: When you type a context prefix (e.g., /p), a label appears showing "Searching in Products" to confirm the active context.

Features

  • ⚡
    Lightning Fast

    Instant search with simulated loading states

  • 🎯
    Context-Aware

    Switch between products, orders, users, and invoices

  • ⌨️
    Keyboard Navigation

    Full keyboard control with arrow keys and shortcuts

  • 🔍
    Smart Search

    Fuzzy matching with highlighted results

  • 📄
    Pagination

    Navigate through pages of results with arrow keys

  • 🎨
    Themeable

    Adapts to your selected theme automatically

Search Examples

Try these search queries:

Products

Orders

Users

Invoices

Implementation

The command palette is globally available throughout the application:

  • JavaScript: /src/js/command-palette.js
  • Styles: src/scss/core-components/_command-palette.scss
  • Variables: src/scss/_variables.scss
  • HTML: Included in views/layout.mustache
Note: This is a demo with dummy data. In a real application, you would connect the search to your backend API for live results.
Type to search or use /p for products, /o for orders, /u for users, /i for invoices
↑↓ Navigate
←→ Pages
↵ Select
Esc Close

Settings

👤

John Doe

Administrator