Keyboard-first command palette with fuzzy search.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

commands(required)

• Type: Command[] | string
• Available commands (array or JSON string)

shortcut

• Type: string - Default: 'Cmd+K'
• Keyboard shortcut to open (e.g., 'Cmd+K', 'Ctrl+K')

placeholder

• Type: string - Default: 'Search commands...'
• Placeholder text for search input

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

animate

• Type: boolean - Default: true
• Enable animations

className

• Type: string
• Additional CSS class

a11yLabel

• Type: string
• Accessibility label

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-command-palette
• .cc-command-palette-backdrop
• .cc-command-palette-overlay
• .cc-command-palette__empty
• .cc-command-palette__footer
• .cc-command-palette__hint
• .cc-command-palette__icon
• .cc-command-palette__input
• .cc-command-palette__item
• .cc-command-palette__item-content
• .cc-command-palette__item-description
• .cc-command-palette__item-icon
• .cc-command-palette__item-label
• .cc-command-palette__kbd
• .cc-command-palette__list
• .cc-command-palette__search