Command Palette

A searchable list of actions in a dialog, opened with ⌘K or Ctrl+K.

Stable

Web

iOS

Android

@advui/core

Source

Basic

Preview

Code

or press ⌘ J / Ctrl J

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { CommandPalette, type Command } from '@advui/core'

const commands: Command[] = [
  { id: 'reports', label: '5W reports', group: 'Go to', onSelect: () => router.push('/reports') },
  { id: 'export', label: 'Export to Excel', group: 'Actions', keywords: ['xlsx'], onSelect: exportXlsx },
]

<CommandPalette commands={commands} />

API reference

CommandPalette

Prop	Type	Default	Description
`commands` required	`Command[]`	—	`{ id, label, onSelect, group?, icon?, shortcut?, keywords?, disabled? }`.
`open`	`boolean`	—	Open state, when you control it; the hotkey also opens it.
`defaultOpen`	`boolean`	`false`	Open at first, when the palette manages its state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the palette opens or closes.
`hotkey`	`string \| null`	`'k'`	Web: ⌘ or Ctrl plus this key toggles it. `null` turns it off.Web only.
`labels`	`Partial<CommandPaletteLabels>`	—	Title, placeholder and empty text, for translation.

rankCommand(command, query)

The ranking it uses: 0 label starts with the text, 1 a word does, 2 contains (label, keywords, group), -1 no match.

Accessibility

A modal dialog named "Command palette"; focus goes to the text box and returns to where it was on close.
On web it is a WAI-ARIA combobox: focus stays in the text box while aria-activedescendant follows the arrow keys through a listbox of options, grouped under named groups.
On iOS and Android each command is a button in the list.
Shortcut hints are shown but hidden from screen readers; the palette does not bind them.

Keyboard interactions
Key	Action
`⌘K / Ctrl+K`	Opens or closes the palette (web).
`Arrow Down / Arrow Up`	Moves through the commands, skipping disabled ones.
`Enter`	Runs the highlighted command and closes.
`Escape`	Closes without running anything.

Platform notes

Web

The hotkey listens on the whole page while the component is mounted.

iOS

Open it from a button; there is no hotkey.

Android

Same as iOS; the back button closes it.

Since v0.6.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousVideo

NextFile Dropzone