Hold the shortcut to squeeze the keys, then release to open.

Command menu

A ⌘K command palette and keyboard shortcut with squeeze effect.

Installation

npx shadcn@latest add qubydev/bunui/command-menu

How to use

demo.tsx
import { CommandMenu } from "@/components/ui/command-menu"
import { Home, Settings, User } from "lucide-react"


const items = [
  { id: "home", label: "Go to Dashboard", icon: <Home />, group: "Navigation" },
  { id: "profile", label: "Open Profile", icon: <User />, group: "Navigation" },
  { id: "settings", label: "Settings", icon: <Settings />, shortcut: "⌘," },
]


export function Demo() {
  return <CommandMenu items={items} onSelect={(item) => console.log(item.id)} />
}

Props

Options you can pass to customize this component.

Prop
Type
Description
items*
CommandMenuItem[]

Commands to render. Each item has an id, label, and optional icon, description, shortcut, keywords, group, and onSelect.

open
boolean

Open state for controlled usage. Leave it out to let the component manage itself.

defaultOpen
boolean

Initial open state when the component is uncontrolled.

onOpenChange
(open: boolean) => void

Called whenever the open state changes.

onSelect
(item: CommandMenuItem) => void

Called with the chosen item, in addition to the item's own onSelect.

hotkey
string

Letter pressed with the modifier (⌘ on macOS, Ctrl elsewhere) to open the menu.

placeholder
string

Placeholder shown inside the search input.

triggerPlaceholder
string

Label shown inside the trigger before the shortcut chips.

emptyMessage
string

Message shown when no item matches the query.

showTrigger
boolean

Renders the built-in search-style trigger. Set false to open via the hotkey only.

className
string

Extra classes merged onto the trigger.

Dependencies

dialog

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Bun UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.