Skip to content
Pinky UI

search

Command Palette

A reusable keyboard-first command surface with groups, filtering and activation.

  • search
  • command
  • keyboard
  • combobox

Live preview

Quick usage

usage
import { CommandPalette } from "@pinky-ui/systems";

<CommandPalette items={commands} open={open} onOpenChange={setOpen} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for a reusable keyboard-first launcher of product commands, navigation, or creation actions.

Use when

Many known actions benefit from search, sections, recent items, and a fast shortcut.

Avoid

Application-specific hidden systems or commands that are only reachable through the palette.

Accessibility

Use combobox/listbox semantics, active descendant, visible empty state, Escape, and focus restoration.

Keyboard and touch

Arrow keys move, Enter activates, and a visible button provides a non-shortcut route.

Reduced motion and performance

Filter in memory for small command sets and avoid animated stagger on each query.

Composition and anti-patterns

Keep commands supplied by the host; do not turn this into a second router or permission system.

Open this skill on its own page