Command Palette

Beautiful, accessible command palette for the web. Fuzzy search, keyboard navigation, nested commands, and full ARIA support — all in ~6KB with zero dependencies.

~6KB gzipped Zero Dependencies JavaScript ARIA Support Themeable

View on GitHub

Features

Everything you need for a world-class command palette experience.

⚡

Lightweight

~6KB gzipped with zero dependencies.

🔍

Fuzzy Search

Smart matching with scoring and highlighting.

⌨️

Keyboard First

Full navigation with ↑↓, Enter, Escape.

📱

Responsive

Works beautifully on mobile.

🎨

Themeable

Light, dark, or system preference.

♿

Accessible

Full ARIA support, focus trap.

🔄

Nested Commands

Drill-down submenus with breadcrumbs.

⏱️

Async Support

Load commands dynamically.

📜

Recent History

Remembers frequently used commands.

Installation

Install via npm or use directly from CDN.

npm / yarn / pnpm

bash

npm install @bw-ui/command-palette

CDN

html

<link rel="stylesheet" href="https://unpkg.com/@bw-ui/command-palette/dist/bw-command-palette.min.css">
<script src="https://unpkg.com/@bw-ui/command-palette/dist/bw-command-palette.min.js"></script>

Quick Start

Get up and running in under a minute.

javascript

import { BWCommandPalette } from '@bw-ui/command-palette';

const cmd = new BWCommandPalette({
  trigger: 'mod+k',
  commands: [
    { id: 'new-file', label: 'New File', icon: '📄', action: () => createFile() },
    { id: 'settings', label: 'Settings', icon: '⚙️', children: [...] },
  ],
});

💡

Tip: mod+k

The mod key is ⌘ on Mac and Ctrl on Windows/Linux.

Options

Configuration options for the command palette.

Option	Type	Default	Description
`trigger`	`string \| false`	`'mod+k'`	Hotkey to open
`commands`	`Command[] \| Function`	`[]`	Commands array or async provider
`placeholder`	`string`	`'Search...'`	Input placeholder
`closeOnSelect`	`boolean`	`true`	Close after selecting
`maxResults`	`number`	`50`	Max results to show
`theme`	`'light' \| 'dark' \| 'system'`	`'system'`	Color theme

Command Object

Structure of a command in the palette.

javascript

interface Command {
  id: string;           // Required: unique identifier
  label: string;        // Required: display text
  icon?: string;        // Optional: emoji or icon
  shortcut?: string;    // Optional: shortcut hint
  children?: Command[]; // Optional: nested commands
  action?: () => void;  // Optional: callback
}

Methods

Available methods on the command palette instance.

Method	Description
`open()`	Open the command palette
`close()`	Close the command palette
`toggle()`	Toggle open/close state
`setCommands(commands)`	Replace all commands
`destroy()`	Cleanup and remove

Events

Subscribe to command palette events.

javascript

cmd.on('open', () => console.log('Opened'));
cmd.on('close', () => console.log('Closed'));
cmd.on('select', (command) => console.log('Selected:', command));

Basic Usage

A simple command palette with common actions.

Basic Command Palette

or press ⌘ + K

Click a command to see the action

Nested Commands

Drill-down submenus with breadcrumb navigation.

Nested Commands

Click Settings → Appearance to see nested navigation

Async Commands

Load commands dynamically from an API with loading states.

Async Loading

Type to search users (simulated 500ms API delay)

Theming

Switch between light and dark themes in real-time.

Theme Switcher

Select a theme to see the palette change

Styling

Customize with CSS variables.

css

.bw-cmd-root {
  --bw-cmd-bg: #ffffff;
  --bw-cmd-text: #1f2937;
  --bw-cmd-accent: #3b82f6;
  --bw-cmd-border: #e5e7eb;
  --bw-cmd-radius: 16px;
}

Accessibility

Built with accessibility as a priority.

🎯

Focus Management

Focus is trapped within the dialog.

📢

Screen Reader

ARIA labels and live regions.

⌨️

Keyboard Navigation

Full navigation with keyboard.

🎨

High Contrast

Works with Windows High Contrast.

Browser Support

Tested and supported in all modern browsers.

Browser	Version
Chrome	80+
Firefox	75+
Safari	14+
Edge	80+