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:

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

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.

Chip Icon Button