Studio
Studio/Kits
New kit
Canonical inventory
Navigation · core

Command palette

navigation.command-palette

A command palette is a keyboard-first searchable launcher for actions and navigation.

command palettethe command-k menusearchable action launcherquick command boxthe control that changes viewsthe wayfinding element
States5
Touch target44px
Evidence6
Introduced by2 kits
Visual specimen

Same contract. Every kit voice.

MAVAN renderingdefault
Translation table

What code calls it.

Web<dialog> + comboboxThe closest native or standardized web primitive.direct
ARIAdialog + comboboxThe primary accessibility role or state pattern.direct
SwiftUI.commands + custom searchThe nearest named SwiftUI API.direct
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy

Every part, named.

  1. 1Open shortcut
  2. 2Modal surface
  3. 3Search or combobox input
  4. 4Filtered command list
  5. 5Keyboard selection and dismissal
Often confused with

Similar shape. Different contract.

Top barnavigation.top-bar

Shares a visual family, but has a different role, state model, or interaction contract.

Tabsnavigation.tabs

Shares a visual family, but has a different role, state model, or interaction contract.

Segmented tabsnavigation.segmented-tabs

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Command palette component (navigation.command-palette). A command palette is a keyboard-first searchable launcher for actions and navigation. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

lumen · purple-rain