Command palette

Themed Cmd-K modal command palette with fuzzy filtering, grouped results, and keyboard navigation.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjCommandPaletteFooter } from '@kouji-ui/components';

Loading editor

Playground

#playground

placeholder

trigger

items

hotkey

esc badge

open

<kj-button kjVariant="outline" (click)="open.set(true)">
  Search commands…
</kj-button>

<kj-command-palette
  [(kjOpen)]="open"
  kjPlaceholder="Search commands…"
>
  <kj-command-item kjValue="new-file">New File</kj-command-item>
  <kj-command-item kjValue="open-folder">Open Folder</kj-command-item>
  <kj-command-item kjValue="save">Save</kj-command-item>
  <kj-command-item kjValue="settings">Settings</kj-command-item>
</kj-command-palette>