Command Palette

Overview

CmdPalette provides a keyboard-driven interface for searching and executing commands, similar to VS Code’s command palette or Spotlight search. Typically opened with a hotkey.

Usage

HTML
React

<div class="pm-cmd-palette">
  <input class="pm-cmd-palette__input" role="combobox"
    aria-expanded="true" aria-autocomplete="list"
    placeholder="Type a command..." />
  <div class="pm-cmd-palette__list" role="listbox">
    <div class="pm-cmd-palette__group" role="group">
      <div class="pm-cmd-palette__item" role="option">New File</div>
      <div class="pm-cmd-palette__item pm-cmd-palette__item--active"
        role="option" aria-selected="true">Save</div>
    </div>
  </div>
</div>

import {
  CmdPalette, CmdPaletteInput,
  CmdPaletteList, CmdPaletteItem,
} from "@paramanu/overlays-react"

<CmdPalette open={isOpen} onClose={handleClose}>
  <CmdPaletteInput placeholder="Type a command..." />
  <CmdPaletteList>
    <CmdPaletteItem value="save" active>Save</CmdPaletteItem>
  </CmdPaletteList>
</CmdPalette>

Guidelines

Open with a recognizable hotkey (Cmd+K or Ctrl+K)
Support keyboard navigation (arrow keys, Enter, Escape)
Show an empty state when no results match
Group related commands together

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the palette is visible
`onClose`	`() => void`	-	Callback when the palette should close