Command Palette

Name: Default File
Availability: InStock
Author: Vignesh V

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 github:itsvigneshv/default-file-ui#main df-ui add command-palette

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).