Command Palette

Searchable command dialog with ranking, optional async source, and recent ids.

Also known as: command menu, spotlight, quick actions

Installation

Install with the CLI, or copy the component source into your project.

Add command-palette (npm)

1
npx --yes -p @default-file/ui df-ui add command-palette

Searchable command dialog with sections, glyphs, shortcuts, a disabled row, and recent ids first when the query is empty.

Recent ids sit first while the query is empty.

rankTier sorts matching rows. Keywords expand what a query can hit. Type export to compare Export PNG with Open notes.

Open, then type export. Lower rankTier values sort first. Keywords still match.

When the query is empty, recentIds are listed first in host order, then the rest of the static list.

With an empty query, recentIds rise to the top in host order.

Optional source merges remote rows with static commands. Hold search keeps that request pending so the searching state stays visible.

Remote source

Hold search

Hold search keeps the source pending so the searching state stays on screen.

emptyContent replaces the catalogue empty copy when nothing matches.

No static commands. The empty slot is custom copy.

background is forwarded to the search field. footer replaces the default keyboard hints.

Custom search fill and footer hints.

Searchable command dialog over kit Dialog. Ranks static commands, optional async results, and recent ids, then runs the active command.

Prop	Type	Default	Notes
open	boolean	-	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	-	Called when open changes. Closing clears the query and async session.
commands	CommandItem[]	-	Static command list (required).
source	(query: string) => Promise<CommandItem[]>	-	Optional async source. Debounced while open; merged with static commands.
recentIds	string[]	[]	Command ids promoted when the query is empty.
onRun	(command: CommandItem) => void	-	Called after a command is chosen, before command.run().
placeholder	string	-	Search field placeholder. Defaults to the string catalogue.
background	string	-	Search field fill, forwarded to SearchInput.
emptyContent	ReactNode	-	Empty status content when nothing matches. Defaults to the string catalogue.
footer	ReactNode	-	Footer content under the list. Defaults to short keyboard hints.
className	string	-	Additional styles on DialogContent.

Prop	Type	Default	Notes
id	string	-	Stable id (required).
label	string	-	Visible and searchable label (required).
section	string	-	Group heading. Falls back to the catalogue commands label.
keywords	string[]	-	Extra strings included in ranking.
rankTier	number	0	Ranking band for query results. Lower tiers sort before higher tiers.
glyph	ReactNode	-	Leading mark on the option row.
shortcut	string	-	Optional shortcut shown with Kbd.
disabled	boolean	-	Non-runnable option.
run	() => void	-	Action invoked when the command runs (required).