Docs/Command Menu

Command Menu

A macOS Spotlight-style command menu with animated search, keyboard navigation, and customizable groups. Features backdrop blur, smooth animations, and full keyboard support.

Installation

$pnpm dlx shadcn@latest add @componentry/command-menu

Usage

API Reference

PropTypeDefault
groupsArray of menu groups with title and items. Each item has id, title, icon (optional), and onSelect callback.
array—
placeholderPlaceholder text for the search input.
string"Search..."
emptyMessageMessage shown when no results are found.
string"No results found"
brandNameBrand name displayed in the footer.
string"Command Menu"
triggerLabelLabel for the trigger button.
string"Search..."
triggerClassNameAdditional CSS classes for the trigger button.
string—
shortcutKeyKeyboard shortcut key used with Cmd/Ctrl.
string"K"
openControlled open state.
boolean—
onOpenChangeCallback when open state changes.
function—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
import { CommandMenu } from "@/components/ui/command-menu"
import { FileText, Settings, User, Home, BookOpen } from "lucide-react"

const groups = [
  {
    title: "Pages",
    items: [
      { id: "home", title: "Home", icon: <Home className="h-4 w-4" />, onSelect: () => console.log("Home") },
      { id: "about", title: "About", icon: <FileText className="h-4 w-4" />, onSelect: () => console.log("About") },
      { id: "docs", title: "Documentation", icon: <BookOpen className="h-4 w-4" />, onSelect: () => console.log("Docs") },
    ],
  },
  {
    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"
/>