CommandPalette

Keyboard-driven command palette with search, grouped results, and arrow-key navigation. Built on the Dialog primitive.

or press Ctrl+K

01 Examples

Basic

Simple command palette with categories and keyboard shortcuts.

Loading syntax highlighting...

Minimal (no icons, no shortcuts)

Clean list without icons or keyboard hints.

Loading syntax highlighting...

With Disabled Items

Some commands can be disabled while remaining visible.

Loading syntax highlighting...

Trigger with Shortcut Badge

A search-bar style trigger matching common SaaS patterns.

Loading syntax highlighting...

02 Customization

Styled via slotClasses

Override specific slots for a branded appearance.

Loading syntax highlighting...

No Footer

Hide the keyboard hints footer for a more compact look.

Loading syntax highlighting...

03 Accessibility

ARIA Combobox Pattern

The search input uses role="combobox" with aria-expanded, aria-controls, and aria-activedescendant linking to the highlighted option. Results use role="listbox" with role="option" on each item.

Keyboard

Cmd+K / Ctrl+K to open (configurable). ↑ ↓ to navigate, Enter to select, Escape to close. The highlighted item scrolls into view automatically.

Focus Management

Inherits focus trap from Dialog. The search input receives focus automatically when the palette opens. Disabled items are skipped during keyboard navigation and have aria-disabled="true".

04 API Reference

22 props

CommandPaletteProps

15 props

No matching properties

No matching properties

CommandPaletteItem

7 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...