Add a beautiful, accessible command palette to any web app in minutes. Fuzzy search, keyboard navigation, nested commands, theming — all built-in.
Try it now
or
Built for developers who care about UX. Every feature is designed to enhance productivity without adding complexity.
Smart matching that finds commands even with typos. Scores results by relevance and highlights matched characters.
Navigate with arrow keys, select with Enter, close with Escape. Full keyboard accessibility out of the box.
Organize commands into hierarchies with drill-down navigation. Breadcrumb trail shows current location.
Light, dark, or system preference. Customize every aspect with CSS variables to match your brand.
Full ARIA support, focus trapping, screen reader announcements. WCAG 2.1 compliant.
Load commands dynamically from an API. Built-in loading states and error handling.
No complex configuration. Just install, initialize, and go.
Add the package via npm or include from CDN. Zero dependencies means fast installs.
Define your commands with labels, icons, shortcuts, and actions. Group them however you like.
Press ⌘K and start navigating. Your users will thank you for the productivity boost.
Get started in under a minute. The API is intuitive and well-documented, so you spend less time reading docs and more time shipping.
import { BWCommandPalette } from '@bw-ui/command-palette';
import '@bw-ui/command-palette/css';
const cmd = new BWCommandPalette({
trigger: 'mod+k',
placeholder: 'Type a command...',
commands: [
{
id: 'new-file',
label: 'New File',
icon: '📄',
shortcut: 'mod+n',
action: () => createFile()
},
{
id: 'settings',
label: 'Settings',
icon: '⚙️',
children: [
{ id: 'theme', label: 'Theme', ... },
{ id: 'account', label: 'Account', ... }
]
}
]
});Built-in light and dark themes, plus full CSS variable customization for seamless integration with your brand.
Install via npm for production builds, or use the CDN for quick prototyping.
Join developers who ship faster with keyboard-first navigation.