Command Menu

A macOS Spotlight-style command menu with animated search, smooth transitions, keyboard navigation, and customizable groups.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/command-menu.json"

Examples

Default

import { CommandMenu } from "@/components/ui/command-menu"
import { FileText, Settings, User, Search } from "lucide-react"

const groups = [
  {
    title: "Pages",
    items: [
      { id: "home", title: "Home", icon: <FileText className="h-4 w-4" />, onSelect: () => console.log("Home") },
      { id: "about", title: "About", icon: <FileText className="h-4 w-4" />, onSelect: () => console.log("About") },
    ],
  },
  {
    title: "Settings",
    items: [
      { id: "profile", title: "Profile", icon: <User className="h-4 w-4" />, onSelect: () => console.log("Profile") },
      { id: "settings", title: "Settings", icon: <Settings className="h-4 w-4" />, onSelect: () => console.log("Settings") },
    ],
  },
]

<CommandMenu 
  groups={groups}
  placeholder="Search..."
  brandName="My App"
/>

Custom Shortcut & Labels

import { CommandMenu } from "@/components/ui/command-menu"
import { FileText, Hash } from "lucide-react"

const groups = [
  {
    title: "Documentation",
    items: [
      { id: "intro", title: "Introduction", icon: <FileText className="h-4 w-4" />, onSelect: () => {} },
      { id: "api", title: "API Reference", icon: <Hash className="h-4 w-4" />, onSelect: () => {} },
    ],
  },
]

<CommandMenu 
  groups={groups}
  placeholder="Search documentation..."
  triggerLabel="Docs..."
  shortcutKey="J"
  brandName="Docs"
/>

Controlled State

import { useState } from "react"
import { CommandMenu } from "@/components/ui/command-menu"

function MyComponent() {
  const [open, setOpen] = useState(false)
  
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Menu</button>
      <CommandMenu 
        groups={groups}
        open={open}
        onOpenChange={setOpen}
      />
    </>
  )
}

Use the open and onOpenChange props to control the menu state externally.

Props

groups

Array of menu groups with title and items. Each item has id, title, icon (optional), and onSelect callback.

placeholder

Placeholder text for the search input (default: "Search...")

emptyMessage

Message shown when no results are found (default: "No results found")

brandName

Brand name displayed in the footer (default: "Command Menu")

triggerLabel

Label for the trigger button (default: "Search...")

triggerClassName

Additional CSS classes for the trigger button

shortcutKey

Keyboard shortcut key used with Cmd/Ctrl (default: "K")

open

Controlled open state (optional)

onOpenChange

Callback when open state changes (optional)

Keyboard

⌘/Ctrl + K

Toggle the command menu (customizable via shortcutKey prop)

↑ / ↓

Navigate through menu items

Enter

Select the highlighted item

Escape

Close the command menu