Command Palette
A command palette component for quick actions and navigation. Provides a searchable interface with keyboard shortcuts, grouped commands, and customizable styling. Perfect for power users and quick navigation.
Installation
Import
Usage
The Command Palette (CommandDialog) is perfect for quick actions, navigation, and power-user features. Use it to provide a searchable interface for common actions, navigation, and commands. It's typically triggered with a keyboard shortcut (e.g., Cmd+K or Ctrl+K). The component supports grouping commands, keyboard shortcuts, icons, and filtering. Use the standalone Command component for inline search interfaces in dropdowns or other contexts.
Design Guidelines
The command palette should be easily accessible, typically via a keyboard shortcut. Use clear, descriptive command names and group related commands together. Include keyboard shortcuts for frequently used commands. Use icons to make commands more recognizable. Ensure the search is fast and responsive. The dialog should be centered and appropriately sized. Use CommandSeparator to visually separate different groups of commands.
Basic Usage
Simple command palette with search and commands
With Keyboard Shortcuts
Command palette with keyboard shortcut indicators
Multiple Groups
Command palette with multiple command groups
Standalone Command
Command component without dialog (for inline use)
CommandDialog
Dialog wrapper for the command palette This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Whether the dialog is open |
onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes |
title | string | "Command Palette" | Dialog title (hidden by default, for accessibility) |
description | string | "Search for a command to run..." | Dialog description (hidden by default, for accessibility) |
className | string | — | Additional CSS classes to apply to the component |
Command
Main command component container This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CommandInput
Search input for filtering commands This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | - | Placeholder text for the input |
withIcon | boolean | false | Whether to show a search icon |
standalone | boolean | true | Whether the input is standalone (affects styling) |
className | string | — | Additional CSS classes to apply to the component |
CommandList
Container for command items This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CommandEmpty
Message displayed when no commands match the search This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CommandGroup
Group of related commands with optional heading This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | undefined | Optional heading for the command group |
className | string | — | Additional CSS classes to apply to the component |
CommandItem
Individual command item This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CommandShortcut
Keyboard shortcut indicator This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
CommandSeparator
Visual separator between command groups This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |