Command Palette

A Spotlight / Cmd+K overlay for quickly navigating and executing actions. Supports grouped results, keyboard navigation (↑↓ + Enter), fuzzy filtering, and shortcut hints.

Pro

Command Palette — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic Usage

Bind [(open)] to toggle the palette. Pass a flat or grouped array of CommandItem objects. Listen to (selected) for the chosen command.

HTML

TypeScript

Features

Fuzzy search across label, description and group
Keyboard navigation: ↑↓ to move, Enter to select, Esc to close
Grouped results with optional section headings
Shortcut hint badges per item
Backdrop blur overlay, click-outside to close

CommandItem Interface

TypeScript

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add command-palette

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add command-palette
// Paths are relative to aliases.components (default: src/app/components)
import { CommandPaletteComponent } from './command-palette/command-palette.component';

@Component({
  selector: 'app-your-component',
  imports: [
    CommandPaletteComponent
  ],
  template: `...`
})
export class YourComponent {}

API for command-palette — generated from JSDoc in the library source.

API reference for command-palette
API	Member	Type	Default	Description
`base-command-palette`	`open`	`boolean`	`false`	—
`base-command-palette`	`items`	`CommandItem[]`	`[]`	—
`base-command-palette`	`placeholder`	`unknown`	`'Type a command or search…'`	—
`base-command-palette`	`(openChange)`	`boolean`	—	Emits when openChange occurs.
`base-command-palette`	`(selected)`	`CommandItem`	—	Emits when selected occurs.