KokonutUI

Action Search Bar

A command palette-style search bar with filterable actions, keyboard navigation, and staggered motion animations. Click the input below to see the action list, then type to filter.

motiondebouncea11y

Demo

Search Commands

Props

Prop	Type	Default
actions	Action[]	5 sample actions (Book tickets, Summarize, etc.)
defaultOpen	boolean	false

Action Interface

interface Action {
  id: string;          // Unique identifier
  label: string;       // Display text
  icon: ReactNode;     // Lucide icon or any JSX
  description?: string; // Subtitle text (e.g. "gpt-5")
  short?: string;      // Keyboard shortcut label
  end?: string;        // Right-aligned tag (e.g. "Agent")
}