Command Palette

A full-screen overlay with a search input for quickly finding and executing commands, navigating pages, or searching content. Activated with ⌘K (Mac) or Ctrl+K (Windows).

Preview

ESC

Actions

Create new project⌘N

Search projects⌘F

Import from file

Navigation

Go to Dashboard⌘1

Go to Team⌘2

Go to Settings⌘,

Empty state

ESC

No results found for "xyzfoo"

Features

• Search filtering -- items are filtered in real-time as the user types.
• Category grouping -- commands grouped by type (Actions, Navigation, etc.).
• Keyboard navigation -- Arrow keys move focus, Enter selects, Escape closes.
• Shortcuts -- displays keyboard shortcuts for each command.
• Empty state -- friendly message when no results match.

Props

Prop	Type	Default	Description
open	boolean	false	Whether the palette is visible
onClose	() => void	--	Close handler
commands	CommandGroup[]	--	Grouped command items
onSelect	(command: string) => void	--	Command execution handler
placeholder	string	'Type a command or search...'	Input placeholder

CommandGroup

Field	Type	Description
label	string	Group heading
items	CommandItem[]	Commands in this group

CommandItem

Field	Type	Description
label	string	Command name
value	string	Command identifier
icon	ReactNode	Leading icon
shortcut	string	Keyboard shortcut

Code example

React

import { CommandPalette } from '@thepace/lexicon/components';

<CommandPalette
  open={isOpen}
  onClose={() => setOpen(false)}
  commands={[
    {
      label: 'Actions',
      items: [
        { label: 'Create new project', value: 'new', shortcut: '⌘N' },
        { label: 'Search projects', value: 'search', shortcut: '⌘F' },
      ],
    },
    {
      label: 'Navigation',
      items: [
        { label: 'Go to Dashboard', value: 'dashboard', shortcut: '⌘1' },
        { label: 'Go to Settings', value: 'settings', shortcut: '⌘,' },
      ],
    },
  ]}
  onSelect={executeCommand}
/>

CSS class reference

Class	Purpose
.lex-command-palette	Main container
.lex-command__input-wrapper	Search input row
.lex-command__search-icon	Search icon
.lex-command__input	Text input
.lex-command__kbd	Keyboard hint badge
.lex-command__group	Command group
.lex-command__group-label	Group heading
.lex-command__item	Command item
.lex-command__item--active	Highlighted item
.lex-command__item-icon	Item icon
.lex-command__item-label	Item text
.lex-command__item-shortcut	Shortcut hint
.lex-command__empty	No-results message

Accessibility

• Uses role="dialog" with aria-modal="true".
• The search input has role="combobox" with aria-autocomplete="list".
• The results list uses role="listbox" and items use role="option".
• Active item is indicated with aria-selected="true".
• Escape closes the palette.
• Focus returns to the element that triggered the palette on close.

Guidelines

Do

• Register ⌘K / Ctrl+K globally for quick access.
• Group commands by category for scanability.
• Show keyboard shortcuts for frequently-used commands.

Don't

• Don't put more than 20–30 commands — use search filtering to manage large lists.
• Don't use as a replacement for navigation — it supplements it.
• Don't include commands that require additional context or parameters.