A keyboard-driven command palette opened as a modal. Supports static item lists, grouped results,
descriptions, hidden keyword search, and fully async data fetching. Keyboard navigation with ↑ / ↓ auto-scrolls the active item into view.
Bind ⌘K / Ctrl+K in your application if desired; the component does not register a global shortcut.
Pass a static items array. Items are filtered client-side by label, group, description and keywords. Use group to visually section commands.
Commands can trigger any side-effect — toasts, navigation, state changes.
After calling onSelect, CommandPalette invokes its close prop. Supply close: () => modalManager.close() when opening it as a modal. Do not also close from onSelect, or a second close could dismiss an underlying modal. Async onSelect work is not awaited before closing.
These commands show toast feedback when selected. Global keyboard shortcuts must be registered by your application.
Pass an async function as items for dynamic results.
The function receives the current query string and must return a Promise<CommandItem[]>.
A spinner is shown while loading.
Results are fetched asynchronously as you type. Try pdf, report or notes.
Pass an options object with a unique key as the third argument to modalManager.open().
If a modal with the same key is already open, subsequent calls resolve immediately with undefined —
so repeated opens do not stack multiple palettes. This example also uses the option snippet to customize highlighted results.