Command Palette

The Command Palette enables efficient user interaction by consolidating application commands in a searchable, centralized interface. It’s akin to a spotlight search, providing immediate access to features, documents, settings, or actions directly from the keyboard.

Examples

Basic Usage

This example showcases a basic Command Palette setup with sections for “Recently Used” commands and “Suggestions”:

Theme Customization

The default theme for the Command Palette is designed for clarity and ease of use, but can be customized to match your application’s design language:

root{}(6 keys)

Learn more about how to customize in the Theme documentation.

API

Customize the Command Palette through the following properties:

Name	Type	Default
`search`	`string` Search input value.
`placeholder`	`string` Placeholder text.
`selected`	`number` Selected Index.
`autoFocus`	`boolean` Autofocus or not.	`true`
`emptyMessage`	`string` Empty message to show when there are no items.
`inputIcon`	`ReactNode` Icon to show in the search input.
`onSearchChange`	`(value: string) => void` When the search input value changes.
`onSelectedIndexChange`	`(value: number) => void` When a user picks something from the list.
`onHotkey`	`(hotkey: HotkeyIem) => void` When a hotkey was triggered.
`theme`	`CommandPaletteTheme` Theme for the CommandPalette.

Design and Usability Tips

Intuitive Access: Ensure the Command Palette is easily accessible through a well-known keyboard shortcut (e.g., Cmd/Ctrl + P), making it discoverable and convenient.
Clear Categorization: Organize commands into clear categories or sections to help users quickly find what they need.