CommandPalette

Markdown

A Ctrl/Cmd+K menu for jumping to places and searching, with results in groups.

Use it for
A Ctrl/Cmd+K jump-anywhere search for frequent users.
Not for
The only way to reach pages. Try Sidebar or NavigationMenu.

CommandPalette preview

Nothing selected yet.

Installation

npm install @stackunseen/ui
import { CommandPalette } from '@stackunseen/ui/navigation';
Styles: @stackunseen/ui/styles.css and @stackunseen/ui/navigation.css

Usage and props

Import this component from @stackunseen/ui/navigation. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/navigation.css.

Static items filter locally by every word; async results are debounced, canceled through the signal and never shown for an older query. With a LinkProvider, items with an href are that router link. Excerpts are plain text; markMatches marks them safely.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

open? · defaultOpen? · onOpenChange? · items · search?(query, signal) · debounceMs? · onSelect · shortcut?: "mod+k" | false · label? · placeholder? · emptyState? · footerHints? · trailingAction?(query) · highlight?(text, query) | false · cancelLabel? · useCommandPalette() · markMatches(text, query)
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
open? · defaultOpen? · onOpenChange? · items · search?(query, signal) · debounceMs? · onSelect · shortcut?: "mod+k" | false · label? · placeholder? · emptyState? · footerHints? · trailingAction?(query) · highlight?(text, query) | false · cancelLabel? · useCommandPalette() · markMatches(text, query)
Keeps honest
Static items filter locally by every word; async results are debounced, canceled through the signal and never shown for an older query. With a LinkProvider, items with an href are that router link. Excerpts are plain text; markMatches marks them safely.
MCP
read_component "CommandPalette" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Up and Down move and wrap, Home and End jump, Enter selects, Escape and the backdrop close. Enter does nothing during IME composition. Focus returns to the opener.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio