CommandBox

Usage

import { CommandBox } from "@/components/ui/commandbox"

const items = [
  { id: "home", title: "Go to Home", shortcut: ["⌘", "H"] },
  { id: "search", title: "Search", shortcut: ["⌘", "K"] },
]

export function Example() {
  return (
    <CommandBox
      items={items}
      onSelect={(item) => console.log(item.title)}
    />
  )
}

Installation

Copy the component file into your project:

// Copy the full component code

Features

• Keyboard Navigation — Arrow keys, Enter to select, Escape to close
• Search Filtering — Real-time filtering with pluggable filter function
• Grouping — Auto-group items via group property or explicit groups prop
• Shortcuts — Display keyboard shortcuts next to items
• Variants — default, bordered, elevated, minimal

Props

CommandBox

CommandItem