# Command Palette

> A Cmd/Ctrl+K command palette overlay with fuzzy subsequence search, multi-mark match highlighting, a gliding selection cursor, full keyboard navigation with aria-activedescendant, grouped sections and kbd hints.

- Category: Popover
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: search
- Page: https://builder.atheros.ai/components/command-palette
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_command_palette/preview-5a13e3e6ee18.webp

## Features

- Cmd/Ctrl+K global shortcut to open and close the palette
- Fuzzy subsequence matching with substring-first ranking and best-match preselection
- Multi-span `<mark>` highlighting of every matched character run
- Gliding selection cursor that slides between rows via transform
- Staggered cascade animation on the result rows after every query change
- Two-layer open motion — backdrop fade desynced from the panel spring-and-deblur — with an instant close
- Full keyboard navigation: Arrow keys, Home/End, Enter to run, layered Escape (clears the query first, then closes)
- Roving `aria-activedescendant` combobox pattern with `aria-selected` options
- Grouped sections that hide automatically when they have no matches
- Characterful empty state that echoes the failed query and suggests fixes
- Live results count in the footer announced via `aria-live="polite"`
- Responsive overlay that adapts down to 280px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog role** — The panel uses `role="dialog"` with `aria-modal` and an `aria-label`
- **Listbox semantics** — The list uses `role="listbox"` and items use `role="option"`
- **Search labelling** — The input has an `aria-label` and `aria-controls` for the list
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Cmd/Ctrl + K` — Toggle the command palette open or closed
- `ArrowDown` — Move highlight to the next command (wraps at the end)
- `ArrowUp` — Move highlight to the previous command (wraps at the start)
- `Home` — Move highlight to the first command
- `End` — Move highlight to the last command
- `Enter` — Run the highlighted command
- `Escape` — Clear the query first if present, otherwise close the palette and restore focus
- `Tab` — Move focus within the panel, trapped to the dialog

## Common questions

**Which frameworks is Command Palette available in?**

Command Palette ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Command Palette popover component free?**

Command Palette is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Command Palette support dark mode?**

Yes. Command Palette ships light and dark themes, both drawn from the Vector design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Command Palette live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/command-palette

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt