CommandPalette

Search grouped application commands and activate actions or links.

Category: Navigation
Import: @neural-ui/core/command-palette
Selector: neu-command-palette

import { NeuCommandPaletteComponent } from '@neural-ui/core/command-palette';

Usage

Give every command a unique id and a kind: action, router or link. Action commands emit commandAction; handle the id in your application. Router and link commands use their native destinations. Open with the trigger or the built-in Ctrl/Meta+K shortcut. shortcut is visual metadata, not a registered hotkey. Use the item Template for content only, without a nested interactive control.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Events: 0

empty

disableLast

<button neu-button (neuClick)="palette.open()">
  {{ t("Open command palette", "Abrir paleta de comandos") }}</button
><neu-command-palette
  #palette
  [commands]="commands()"
  (commandAction)="record('commandAction', $event.id)"
></neu-command-palette>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const commands = signal([
  {
    "id": "save",
    "kind": "action",
    "label": "Save draft",
    "group": "Actions",
    "description": "Keep your changes locally",
    "shortcut": "Ctrl+S"
  },
  {
    "id": "home",
    "kind": "router",
    "label": "Home",
    "routerLink": "/en"
  },
  {
    "id": "disabled",
    "kind": "action",
    "label": "Archive",
    "disabled": false
  }
]);

import type { NeuCommand } from '@neural-ui/core/command-palette';

readonly commands = signal<readonly NeuCommand[]>([
  {
    "id": "save",
    "kind": "action",
    "label": "Save draft",
    "group": "Actions",
    "description": "Keep your changes locally",
    "shortcut": "Ctrl+S"
  },
  {
    "id": "home",
    "kind": "router",
    "label": "Home",
    "routerLink": "/en"
  },
  {
    "id": "disabled",
    "kind": "action",
    "label": "Archive",
    "disabled": false
  }
]);

State and events

Accessibility and keyboard

Ctrl/Meta+K opens the palette. Type to search, arrows move through results, Enter activates and Escape closes and restores focus.

Key	Action
`Ctrl / Meta + K`	Open the palette when its shortcut is enabled.
`Tab`	Move through the search field and available controls.
`ArrowDown / ArrowUp`	Move through available search results.
`Home`	Focus the first result.
`End`	Focus the last result.
`Enter`	Activate the focused result.
`Escape`	Close the palette and restore focus.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`commands`	`readonly NeuCommand[]`	`[]`	`[commands]`	Searchable commands with stable ids and action, router or link kinds.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`commandAction`	`NeuCommandAction`	`(commandAction)="onCommandAction($event)"`	Emits the activated action command; handle its id in application code. Link commands use their native destinations.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`NeuCommandPaletteItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuCommandPaletteItem]`

NeuCommandPaletteItemDirectiveView example

Public template directive (entrypoint)

ng-template[neuCommandPaletteItem]

Declaration

import { NeuCommandPaletteItemDirective } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export declare class NeuCommandPaletteItemDirective {
}

Full context

import type { NeuCommandPaletteItemContext } from '@neural-ui/core/command-palette';

import { NeuCommandPaletteItemDirective } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuCommandPaletteItemContext>;

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

NeuCommandPaletteItemDirective

NeuCommandPaletteItemDirective

Events: 0

Public methods

Name	Contract
`close`	`close(): void;`
`open`	`open(): void;`

Public Types

Open a type to inspect its definition and interface fields.

NeuCommandTypeScript

import type { NeuCommandAction } from '@neural-ui/core/command-palette';
import type { NeuCommandLink } from '@neural-ui/core/command-palette';
import type { NeuCommandRouterLink } from '@neural-ui/core/command-palette';

import type { NeuCommand } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export type NeuCommand = NeuCommandAction | NeuCommandRouterLink | NeuCommandLink;

NeuCommandActionTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

import type { NeuCommandAction } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export interface NeuCommandAction extends NeuCommandBase {
  readonly action?: never;
  readonly href?: never;
  readonly kind: 'action';
  readonly routerLink?: never;
  readonly target?: never;
}

NeuCommandBaseTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export interface NeuCommandBase {
  readonly description?: string;
  readonly disabled?: boolean;
  readonly group?: string;
  readonly icon?: string;
  readonly id: string;
  readonly keywords?: readonly string[];
  readonly label: string;
  readonly shortcut?: string;
}

NeuCommandLinkTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

import type { NeuCommandLink } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export interface NeuCommandLink extends NeuCommandBase {
  readonly action?: never;
  readonly href: string;
  readonly kind: 'link';
  readonly routerLink?: never;
  readonly target?: string;
}

NeuCommandPaletteItemContextTypeScript

import type { NeuCommand } from '@neural-ui/core/command-palette';

import type { NeuCommandPaletteItemContext } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export interface NeuCommandPaletteItemContext {
  readonly $implicit: NeuCommand;
  readonly index: number;
}

NeuCommandRouterLinkTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

import type { NeuCommandRouterLink } from '@neural-ui/core/command-palette';

// Public declaration (reference only)
export interface NeuCommandRouterLink extends NeuCommandBase {
  readonly action?: never;
  readonly href?: never;
  readonly kind: 'router';
  readonly routerLink: string | readonly unknown[];
  readonly target?: never;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-50`	Subtle brand surface for hover and focus states	Shared by other Core consumers; scope the override.	`#eff6ff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-cmd-shadow`	Surface or overlay elevation	Shared by other Core consumers; scope the override.	`var(--neu-shadow-lg)`