Command Palette

Components

Command Palette

feedback

interactive

<arc-command-palette>

Overview

Guidelines

When to use

Bind a global keyboard shortcut (e.g., Cmd+K) to toggle the open property for fast access
Provide concise, action-oriented labels on each <arc-command-item> (e.g., "Open File", "Toggle Theme")
Include shortcut hints on items that have associated keyboard bindings for discoverability
Close the palette programmatically after handling the arc-select event to confirm the action ran
Keep the command list under 20-30 items; for larger sets, rely on the search filter

When not to use

Use CommandPalette as a generic search bar -- it is designed for discrete actions, not content search
Leave the palette open after an item is selected; it should always close to return focus to the app
Put nested interactive components like forms or modals inside command items
Omit the label attribute on <arc-command-item> -- the filter and display both depend on it
Override the body scroll lock behavior, as this prevents jarring background movement

Features

Centered modal dialog with animated scale-in transition on open
Auto-focusing search input that resets the query on every open
Live type-ahead filtering against command item labels
Full keyboard navigation: ArrowUp/ArrowDown cycle focus, Enter selects, Escape closes
Keyboard shortcut hints displayed next to each command item in monospace
Footer bar showing navigation key bindings for discoverability
Backdrop overlay with click-to-close and body scroll locking
arc-select and arc-close custom events for integration with application logic

Preview

Open Command Palette

New File

Open File

Save

Toggle Dark Mode

Go to Settings

Sign Out

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-button onclick="document.querySelector('#palette').open = true">Open Palette</arc-button>
<arc-command-palette id="palette">
  <arc-command-item shortcut="⌘O">Open File</arc-command-item>
  <arc-command-item shortcut="⌘S">Save File</arc-command-item>
</arc-command-palette>

import { Button, CommandItem, CommandPalette } from '@arclux/arc-ui-react';

<Button onclick="document.querySelector('#palette').open = true">Open Palette</Button>
<CommandPalette id="palette">
  <CommandItem shortcut="⌘O">Open File</CommandItem>
  <CommandItem shortcut="⌘S">Save File</CommandItem>
</CommandPalette>

<script setup>
import { Button, CommandItem, CommandPalette } from '@arclux/arc-ui-vue';
</script>

<template>
  <Button onclick="document.querySelector('#palette').open = true">Open Palette</Button>
  <CommandPalette id="palette">
    <CommandItem shortcut="⌘O">Open File</CommandItem>
    <CommandItem shortcut="⌘S">Save File</CommandItem>
  </CommandPalette>
</template>

<script>
  import { Button, CommandItem, CommandPalette } from '@arclux/arc-ui-svelte';
</script>

<Button onclick="document.querySelector('#palette').open = true">Open Palette</Button>
<CommandPalette id="palette">
  <CommandItem shortcut="⌘O">Open File</CommandItem>
  <CommandItem shortcut="⌘S">Save File</CommandItem>
</CommandPalette>

import { Component } from '@angular/core';
import { Button, CommandItem, CommandPalette } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, CommandItem, CommandPalette],
  template: `
    <Button onclick="document.querySelector('#palette').open = true">Open Palette</Button>
    <CommandPalette id="palette">
      <CommandItem shortcut="⌘O">Open File</CommandItem>
      <CommandItem shortcut="⌘S">Save File</CommandItem>
    </CommandPalette>
  `,
})
export class MyComponent {}

import { Button, CommandItem, CommandPalette } from '@arclux/arc-ui-solid';

<Button onclick="document.querySelector('#palette').open = true">Open Palette</Button>
<CommandPalette id="palette">
  <CommandItem shortcut="⌘O">Open File</CommandItem>
  <CommandItem shortcut="⌘S">Save File</CommandItem>
</CommandPalette>

import { Button, CommandItem, CommandPalette } from '@arclux/arc-ui-preact';

<Button onclick="document.querySelector('#palette').open = true">Open Palette</Button>
<CommandPalette id="palette">
  <CommandItem shortcut="⌘O">Open File</CommandItem>
  <CommandItem shortcut="⌘S">Save File</CommandItem>
</CommandPalette>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls whether the palette is visible. When set to true, the dialog animates in, the search input auto-focuses, and body scroll is locked. Set to false to close.
`placeholder`	`string`	`'Type a command...'`	Placeholder text displayed in the search input when the query is empty.

Events

Event	Description
`arc-select`	Fired when a command item is selected
`arc-close`	Fired when the palette closes

CommandItem

<arc-command-item>

Action item inside a CommandPalette.

Prop	Type	Default	Description
`shortcut`	`string`	—	Keyboard shortcut hint
`icon`	`string`	—	Name of the icon to display before the item label.