CommandPalette

A modal command palette overlay with fuzzy search, grouped results, match highlighting, keyboard navigation, and focus trap.

Installation

npx dafink-ui add command-palette

Also installs: Scroll-fade

Demo

Press Esc to close

Composition

</CommandGroup>

</CommandPalette>

Props

Name	Type	Default	Description
open	boolean	-	Whether the palette is visible.
onClose	() => void	-	Called when the user presses Escape, clicks the backdrop, or activates an item.
placeholder	string	'Search commands…'	Placeholder text in the search input.
children	ReactNode	-	CommandGroup and CommandItem elements.

Accessibility

CommandPalette is a modal dialog (role="dialog", aria-modal="true"): focus moves to the search input the instant it opens, and Tab/Shift+Tab are intercepted to trap focus inside the dialog. Command items are plain role="option" elements rather than real tab stops, so the search input is typically the only focusable element inside the trap; the "active" item is instead tracked virtually via aria-activedescendant on the input. Escape closes the palette and returns focus to whatever triggered it.

Key	Function
`down arrow`	Moves the active item to the next visible, enabled option, wrapping from the last to the first.
`up arrow`	Moves the active item to the previous visible, enabled option, wrapping from the first to the last.
`home`	Moves the active item to the first visible, enabled option.
`end`	Moves the active item to the last visible, enabled option.
`enter`	Activates the active item: calls its onSelect, then closes the palette.
`escape`	Closes the palette and returns focus to the trigger element.
`tab`	Cycles forward within the dialog; does not escape to the page behind it.
`shift`+`tab`	Cycles backward within the dialog; does not escape to the page behind it.