CommandPalette

navigation

Command palette overlay with search input, filtered results, keyboard shortcut badges, and Escape dismiss. Token-driven colors and sizing.

Import

typescript
import { CommandPalette } from "packages/ui/src";

Props

CommandPaletteProps

PropTypeRequired
openbooleanYes
onClose() => void, items: CommandItem[], onSelect: (item: CommandItem) => void, placeholder?: stringYes

Examples

Command Palette

Searchable command overlay with keyboard shortcuts and filtered results.

Interactive Demo

Metadata

Component Metadata
Familynavigation
FrameworksNext.js, Astro/EmDash
DescriptionCommand palette overlay with search input, filtered results, keyboard shortcut badges, and Escape dismiss. Token-driven colors and sizing.
PropsCommandPaletteProps (open: boolean, onClose: () => void, items: CommandItem[], onSelect: (item: CommandItem) => void, placeholder?: string)
Statesopen, closed, empty-results, filtered, with-shortcuts
A11y
  • Dialog has role=dialog with aria-modal
  • Search input has aria-label
  • Items have role=option in role=listbox
  • Escape key closes palette
Responsive
  • Max width 560px, centered
  • Responsive via padding
Motion
  • No enter/exit animation by default
Token Dependencies
  • components.commandPalette.overlayBg
  • components.commandPalette.bg
  • components.commandPalette.borderColor
  • components.commandPalette.borderRadius
  • components.commandPalette.maxWidth
  • components.commandPalette.inputBg
  • components.commandPalette.inputColor
  • components.commandPalette.inputFontSize
  • components.commandPalette.inputPadding
  • components.commandPalette.itemBg
  • components.commandPalette.itemBgHover
  • components.commandPalette.itemColor
  • components.commandPalette.itemPadding
  • components.commandPalette.itemFontSize
  • components.commandPalette.shortcutColor
  • components.commandPalette.shortcutBg
  • components.commandPalette.emptyColor
Content Slotsitems (CommandItem array), placeholder (string)
CMS Bindings
  • Commands from CMS configuration
  • Labels from CMS data
Test Cases
  • Renders when open
  • Hidden when closed
  • Has role=dialog
  • Shows search input
  • Shows command items
  • Shows shortcut badge
  • Shows empty state for no results
  • Passes className through