Command Palette

A Spotlight / Cmd+K overlay for quickly navigating and executing actions. Supports grouped results, keyboard navigation (↑↓ + Enter), substring filtering across labels, descriptions, and groups, and shortcut hints. Walkthrough: Building a Linear-style command palette in Angular 22.

Pro

Command Palette — part of Base UI Pro

Unlock it plus 90 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

<button (click)="isOpen = true">Open</button>

<base-command-palette
  [(open)]="isOpen"
  [items]="commands"
  (selected)="onCommand($event)">
</base-command-palette>

TypeScript

commands: CommandItem[] = [
  { id: 'home', label: 'Go to Home', group: 'Navigation', icon: 'home', shortcut: '⌘H' },
  { id: 'theme', label: 'Toggle Dark Mode', group: 'Settings', icon: 'moon' },
];

TypeScript

import { Component } from '@angular/core';

// 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-command-palette-example',
  imports: [
    CommandPaletteComponent
  ],
  template: `...`
})
export class CommandPaletteExampleComponent {}

Install

bash

npx base-ui-cli add command-palette

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

TypeScript

import { Component } from '@angular/core';

// 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-command-palette-example',
  imports: [
    CommandPaletteComponent
  ],
  template: `...`
})
export class CommandPaletteExampleComponent {}

Install

bash

npx base-ui-cli add command-palette

CommandItem Interface

TypeScript

interface CommandItem {
  id: string;          // Unique identifier
  label: string;       // Display name
  group?: string;      // Optional section heading
  icon?: string;       // Icon pack name
  shortcut?: string;   // Keyboard hint e.g. '⌘K'
  description?: string // Subtitle text
}

TypeScript

import { Component } from '@angular/core';

// 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-command-palette-example',
  imports: [
    CommandPaletteComponent
  ],
  template: `...`
})
export class CommandPaletteExampleComponent {}

Install

bash

npx base-ui-cli add command-palette

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-ng-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.

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx base-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).