CommandPalette

A filterable command list with keyboard navigation. Takes an array of commands with name, description, and optional shortcut. Users type to filter and navigate with arrow keys / j/k. Uses fuzzy matching.

Import

import { CommandPalette } from "silvery"

Props

Prop	Type	Default	Description
commands	CommandItem[]	required	Available commands
onSelect	(command: CommandItem) => void	--	Called when a command is selected (Enter)
onClose	() => void	--	Called when the palette is dismissed (Escape)
placeholder	string	"Search commands..."	Placeholder text for filter input
maxVisible	number	10	Max visible results
isActive	boolean	true	Whether this component captures input

CommandItem

interface CommandItem {
  name: string // Command display name
  description?: string // Command description
  shortcut?: string // Keyboard shortcut hint
}

Keyboard Shortcuts

Key	Action
Printable chars	Filter by name/description
Backspace	Delete last character
Up/Down	Navigate results
Enter	Select command
Escape	Dismiss palette

Usage

const commands = [
  { name: "Save", description: "Save current file", shortcut: "Ctrl+S" },
  { name: "Quit", description: "Exit application", shortcut: "Ctrl+Q" },
  { name: "Help", description: "Show help" },
]

<CommandPalette
  commands={commands}
  onSelect={(cmd) => exec(cmd.name)}
  onClose={() => setShowPalette(false)}
  placeholder="Type a command..."
/>

See Also

• PickerDialog -- generic search-and-select dialog
• SelectList -- simple select list