Overlay

Command palette for fast navigation

A command palette gives people a keyboard-first way to search and run actions from anywhere in an app. Zentauri UI ships a composable Command primitive with a global Cmd+K hotkey, grouped results, live filtering, an empty state, and an optional animated entry — themeable through --zui-command-* tokens.

Examples

Use the animated entrypoint when the palette should spring in. It honors reduced-motion preferences and falls back to a fade.

Command palette variants examples

Use Show output / Show code on each row, then open the menu to try keyboard navigation (↑ ↓ Enter Esc) and live filtering. Snippets start with a Variant line naming the axis and token.

Appearance: DEFAULT | Size: MD

Appearance: GLASS | Size: MD

Appearance: SKY | Size: MD

Appearance: ROSE | Size: MD

Appearance: PURPLE | Size: MD

Appearance: PINK | Size: MD

Appearance: ORANGE | Size: MD

Appearance: YELLOW | Size: MD

Appearance: TEAL | Size: MD

Appearance: INDIGO | Size: MD

Appearance: EMERALD | Size: MD

Appearance: GRAY | Size: MD

Appearance: AMBER | Size: MD

Appearance: VIOLET | Size: MD

Appearance: GRADIENT-BLUE | Size: MD

Appearance: GRADIENT-GREEN | Size: MD

Appearance: GRADIENT-RED | Size: MD

Appearance: GRADIENT-YELLOW | Size: MD

Appearance: GRADIENT-PURPLE | Size: MD

Appearance: GRADIENT-TEAL | Size: MD

Appearance: GRADIENT-INDIGO | Size: MD

Appearance: GRADIENT-PINK | Size: MD

Appearance: DEFAULT | Size: SM

Appearance: DEFAULT | Size: MD

Appearance: DEFAULT | Size: LG

Hotkey: ⌘K / Ctrl+K — open the palette from anywhere without a trigger button.

CSS variable overrides

Command CSS variables

Override these command palette variables on :root, a theme selector, or a component wrapper to tune the overlay, trigger, panel, input, items, and appearance variants.

139 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-command-overlay-bg: oklch(12.9% 0.042 264.695 / 0.6);
  --zui-command-trigger-border: #0000001a;
  --zui-command-trigger-bg: oklch(98.4% 0.003 247.858);
  --zui-command-trigger-fg: oklch(44.6% 0.03 256.802);
  --zui-command-content-border: #0000001a;
  --zui-command-content-bg: oklch(98.4% 0.003 247.858);
  --zui-command-content-fg: oklch(20.8% 0.042 265.755);
  --zui-command-content-shadow: 0 12px 40px rgba(15,23,42,0.18);
  --zui-command-input-border: #0000000f;
  --zui-command-input-fg: oklch(20.8% 0.042 265.755);
  --zui-command-input-placeholder: oklch(55.1% 0.027 264.364);
  --zui-command-group-heading-fg: oklch(55.1% 0.027 264.364);
  --zui-command-item-fg: oklch(27.8% 0.033 256.848);
  --zui-command-item-active-bg: oklch(95.1% 0.026 236.824);
  --zui-command-item-active-fg: oklch(20.8% 0.042 265.755);
  --zui-command-separator-bg: #0000000f;
  --zui-command-empty-fg: oklch(55.1% 0.027 264.364);
  --zui-command-footer-border: #0000000f;
  --zui-command-footer-fg: oklch(55.1% 0.027 264.364);
  --zui-command-content-default-bg: oklch(98.4% 0.003 247.858);
  --zui-command-content-glass-border: #00000026;
  --zui-command-content-glass-bg: oklch(98.4% 0.003 247.858 / 0.7);
  --zui-command-content-sky-border: oklch(44.3% 0.11 240.79);
  --zui-command-content-sky-bg: oklch(97.7% 0.013 236.62);
  --zui-command-content-rose-border: oklch(45.5% 0.188 13.697);
  --zui-command-content-rose-bg: oklch(96.9% 0.015 12.422);
  --zui-command-content-purple-border: oklch(43.8% 0.218 303.724);
  --zui-command-content-purple-bg: oklch(97.7% 0.014 308.299);
  --zui-command-content-pink-border: oklch(45.9% 0.187 3.815);
  --zui-command-content-pink-bg: oklch(97.1% 0.014 343.198);
  --zui-command-content-orange-border: oklch(47% 0.157 37.304);
  --zui-command-content-orange-bg: oklch(98% 0.016 73.684);
  --zui-command-content-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-command-content-yellow-bg: oklch(98.7% 0.026 102.212);
  --zui-command-content-teal-border: oklch(43.7% 0.078 188.216);
  --zui-command-content-teal-bg: oklch(98.4% 0.014 180.72);
  --zui-command-content-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-command-content-indigo-bg: oklch(96.2% 0.018 272.314);
  --zui-command-content-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-command-content-emerald-bg: oklch(97.9% 0.021 166.113);
  --zui-command-content-gray-border: oklch(27.8% 0.033 256.848);
  --zui-command-content-gray-bg: oklch(98.5% 0.002 247.839);
  --zui-command-content-amber-border: oklch(47.3% 0.137 46.201);
  --zui-command-content-amber-bg: oklch(98.7% 0.022 95.277);
  --zui-command-content-violet-border: oklch(43.2% 0.232 292.759);
  --zui-command-content-violet-bg: oklch(96.9% 0.016 293.756);
  --zui-command-content-gradient-blue-border: oklch(42.4% 0.199 265.638);
  --zui-command-content-gradient-blue-from: oklch(97% 0.014 254.604);
  --zui-command-content-gradient-blue-to: oklch(97.7% 0.014 308.299);
  --zui-command-content-gradient-green-border: oklch(44.8% 0.119 151.328);
  --zui-command-content-gradient-green-from: oklch(98.2% 0.018 155.826);
  --zui-command-content-gradient-green-to: oklch(98.6% 0.031 120.757);
  --zui-command-content-gradient-red-border: oklch(44.4% 0.177 26.899);
  --zui-command-content-gradient-red-from: oklch(97.1% 0.013 17.38);
  --zui-command-content-gradient-red-to: oklch(97.1% 0.014 343.198);
  --zui-command-content-gradient-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-command-content-gradient-yellow-from: oklch(98.7% 0.026 102.212);
  --zui-command-content-gradient-yellow-to: oklch(98% 0.016 73.684);
  --zui-command-content-gradient-purple-border: oklch(43.8% 0.218 303.724);
  --zui-command-content-gradient-purple-from: oklch(97.7% 0.014 308.299);
  --zui-command-content-gradient-purple-to: oklch(97.1% 0.014 343.198);
  --zui-command-content-gradient-teal-border: oklch(43.7% 0.078 188.216);
  --zui-command-content-gradient-teal-from: oklch(98.4% 0.014 180.72);
  --zui-command-content-gradient-teal-to: oklch(98.4% 0.019 200.873);
  --zui-command-content-gradient-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-command-content-gradient-indigo-from: oklch(96.2% 0.018 272.314);
  --zui-command-content-gradient-indigo-to: oklch(97.7% 0.014 308.299);
  --zui-command-content-gradient-pink-border: oklch(45.9% 0.187 3.815);
  --zui-command-content-gradient-pink-from: oklch(97.1% 0.014 343.198);
  --zui-command-content-gradient-pink-to: oklch(96.9% 0.015 12.422);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-command-trigger-bg-dark: oklch(12.9% 0.042 264.695);
  --zui-command-content-bg-dark: oklch(12.9% 0.042 264.695);
  /* ...same variables with -dark at the end */
}

What it does

Render a portal dialog with a search input, grouped items, separators, and an empty state.

Filtering, active-item tracking, and keyboard navigation are handled internally.

Composition and API

Compose Command with CommandTrigger, CommandContent, CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandEmpty, and CommandFooter. Use appearance and size variants for visual tone, and the hotkey prop for a global shortcut.

Common use cases

Global Cmd+K navigation across pages and resources.
Quick action launchers in dashboards and developer tools.
Searchable menus that combine navigation and commands.
Keyboard-driven workflows for power users.

Accessibility

The palette renders role=dialog with aria-modal, traps focus while open, restores focus on close, and exposes the input as a combobox with role=option items. Provide a label for the dialog.

Next.js integration notes

Use Command inside client components since it manages open state and key handlers in the browser. The base entry stays free of framer-motion; import CommandContentAnimated only where you want motion.

FAQ

Does Command support a global Cmd+K shortcut?

Yes. Set the hotkey prop (defaults to k) and the palette binds meta/ctrl + key to toggle open from anywhere.

How does keyboard navigation work?

Arrow Up and Down move the active item, Enter selects it and fires onSelect, and Escape closes the palette. Typing filters items by value and keywords.

Is there an animated command palette?

Yes. Import CommandContentAnimated from the animated entrypoint to spring the palette in; it falls back to a fade when reduced motion is preferred.