Components · Overlays

Command palette

A search-driven launcher — the ⌘K surface — for jumping to anything or running an action by typing. A 48px input sits over a scrollable, groupable result list on the popover surface with shadow-lg. This very site dogfoods it: press ⌘K / Ctrl K.

Preview

The palette surface across the three themes.

Light

Navigation

palette Go to Foundations

widgets Go to Components

Actions

dark_mode Toggle dark theme

Dark

Navigation

palette Go to Foundations

widgets Go to Components

Actions

dark_mode Toggle dark theme

Accessibility

Navigation

palette Go to Foundations

widgets Go to Components

Actions

dark_mode Toggle dark theme

Spec

Values and token references straight from the Zetta spec.

command-palette

backgroundColor: {colors.popover}
textColor: {colors.popover-foreground}
borderColor: {colors.hairline}
borderWidth: 1px
borderRadius: {rounded.base}
shadow: {shadows.lg}
maxWidth: 560px
width: 100%
display: flex
flexDirection: column
overflow: hidden

command-palette-input

height: 48px
paddingX: 16px
textColor: {colors.ink}
placeholderColor: {colors.placeholder}
fontFamily: Geist
fontSize: 14px
borderBottomColor: {colors.hairline}
borderBottomWidth: 1px

command-palette-item

textColor: {colors.ink}
fontFamily: Geist
fontSize: 14px
minHeight: 40px
paddingX: 14px
paddingY: 12px
borderRadius: {rounded.base}
display: flex
alignItems: center
gap: 8px
cursor: pointer

command-palette-item-hover

backgroundColor: {colors.accent}

command-palette-item-focused

backgroundColor: {colors.accent}
outline: 2px solid {colors.border-focus}
outlineOffset: -2px

command-palette-item-selected

textColor: {colors.brand}
fontWeight: 500

command-palette-list

maxHeight: 320px
overflowY: auto
padding: 6px

command-palette-empty

textColor: {colors.muted}
fontFamily: Geist
fontSize: 14px
textAlign: center
paddingX: 14px
paddingY: 32px

command-palette-group-label

textColor: {colors.muted}
fontFamily: Geist
fontSize: 12px
fontWeight: 500
paddingX: 14px
paddingY: 8px

Build with the skill

No package to install — hand this to your AI to generate the command palette in your stack.

Prompt for your AI

Implement the Zetta "Command palette" component in this project's stack using the zetta-design-md skill.

- Apply the `command-palette` spec from the skill (variants: palette, item, item-selected, empty).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Popover surface, 1px hairline, base radius, shadow-lg, max-width 560px. The input is 48px with a hairline underline; the list caps at 320px and scrolls. Items are 40px min-height, highlight on accent, and the selected item goes brand.
Group results with muted 12px labels. Always show an empty state when nothing matches.

Accessibility

Open with ⌘K/Ctrl K, trap focus, and close on Escape. Drive the list with the combobox/listbox pattern — arrows move the active item via aria-activedescendant, Enter runs it.