Commands
A command palette component that provides a searchable, keyboard-navigable interface for executing actions. It supports grouping, keyboard shortcuts, icons, and full customization via slots.
Props
| Name | Default | Type |
|---|---|---|
open | — | boolean Controls the visibility of the command palette |
commands | — | Command[] Array of command objects to display and search |
placeholder | 'Write a command..' | string Placeholder text for the search input |
loading | — | boolean Replaces the search icon with a spinner |
Models
| Name | Default | Type | Description |
|---|---|---|---|
search | '' | string | Two-way binding for the current search input value |
group | 'All' | string | null | Two-way binding for the currently active group filter |
Events
| Name | Payload | Description |
|---|---|---|
close | — | Emitted when Esc is pressed or the close button is clicked |
Slots
The component allows you to fully customize the icon, command item or even replacing the entire command list (note that you will have to implement all the listing functionality yourself in that case).
| Name | Props | Description |
|---|---|---|
default | { commands: Record<string, Command[]> } | Overrides the entire result list. Receives grouped results |
command | { command: Command, group: string } | Overrides the rendering of an individual command item |
icon | { command: Command } | Overrides the icon inside the default command item layout |
Command
Each entry in the commands array must conform to this interface:
| Property | Type | Description |
|---|---|---|
title | string | The display name of the command |
description | string? | Optional secondary text shown below the title |
keywords | string[]? | Optional list of additional keywords associated with the command. Not shown in the UI, but matched against the search query to improve discoverability |
group | string? | Optional group label. Commands without a group are collected under "Other" |
icon | VNode? | Optional icon component to show on the left side of the command. Please note this field assumes the developer is providing a component as-is without any props. |
shortcut | string? | Optional keyboard shortcut string (e.g. 'Ctrl+K'). Keys are split by + and rendered as Kbd elements. The shortcut is also registered as a global listener while the palette is open |
href | string? | If provided, selecting the command will open this URL in a new tab |
handler | (() => void)? | Function to call when the command is selected. Takes precedence over href |
Features
- Search — Filters commands by title, description, group, or href as you type.
- Group filtering — A scrollable row of group badges lets users narrow results to a single group.
- Keyboard navigation — Use
↑/↓to move between results,Enterto select, andEscto close. - Shortcut keys — Shortcuts defined on commands are registered as global key listeners while the component is mounted.
- Auto-scroll — The focused item is automatically scrolled into view.
- Mobile — A dedicated close button is shown on small screens instead of relying solely on
Esc.