"use client" import * as React from "react" import { useRouter } from "next/navigation" import { Search } from "lucide-react" import { cn } from "@/lib/utils" import { Dialog, DialogContent, DialogTitle, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" /** A single result item displayed in the command menu. */ export interface CommandMenuItem { /** Unique identifier. */ id: string /** Display label. */ label: string /** Lucide icon element. */ icon?: React.ReactNode /** Route to navigate to when selected. */ href?: string /** Callback when selected — takes precedence over `href`. */ onSelect?: () => void /** Keyboard shortcut hint, e.g. `"⌘K"`. */ shortcut?: string } /** A labelled group of command menu items. */ export interface CommandMenuGroup { /** Group heading. */ heading: string items: CommandMenuItem[] } export interface CommandMenuProps { /** Grouped command items. */ groups: CommandMenuGroup[] /** Controlled open state. */ open: boolean /** Called when the menu should close. */ onOpenChange: (open: boolean) => void /** Placeholder text for the search input. */ placeholder?: string className?: string } /** * Keyboard-navigable command palette built on the Dialog primitive. * Supports grouped items, fuzzy-ish filtering, keyboard navigation, * and route navigation on selection. * * Bind to `Cmd+K` / `Ctrl+K` in a parent component: * ```tsx * useEffect(() => { * const down = (e: KeyboardEvent) => { * if (e.key === "k" && (e.metaKey || e.ctrlKey)) { * e.preventDefault() * setOpen((o) => !o) * } * } * document.addEventListener("keydown", down) * return () => document.removeEventListener("keydown", down) * }, []) * ``` */ export function CommandMenu({ groups, open, onOpenChange, placeholder = "Type a command or search...", className, }: CommandMenuProps) { const router = useRouter() const [query, setQuery] = React.useState("") const [activeIndex, setActiveIndex] = React.useState(0) const listRef = React.useRef(null) // Flatten filtered items for keyboard navigation const filtered = React.useMemo(() => { const q = query.toLowerCase() return groups .map((group) => ({ ...group, items: group.items.filter((item) => item.label.toLowerCase().includes(q) ), })) .filter((group) => group.items.length > 0) }, [groups, query]) const flatItems = React.useMemo( () => filtered.flatMap((g) => g.items), [filtered] ) // Pre-compute a flat index for each item to avoid mutable counters in render const itemIndexMap = React.useMemo(() => { const map = new Map() let idx = 0 for (const group of filtered) { for (const item of group.items) { map.set(item.id, idx++) } } return map }, [filtered]) // Reset state on open/close React.useEffect(() => { if (open) { setQuery("") setActiveIndex(0) } }, [open]) // Clamp active index when results change React.useEffect(() => { setActiveIndex((i) => Math.min(i, Math.max(flatItems.length - 1, 0))) }, [flatItems.length]) function selectItem(item: CommandMenuItem) { onOpenChange(false) if (item.onSelect) { item.onSelect() } else if (item.href) { router.push(item.href) } } function handleKeyDown(e: React.KeyboardEvent) { if (e.key === "ArrowDown") { e.preventDefault() if (flatItems.length === 0) return setActiveIndex((i) => (i + 1) % flatItems.length) } else if (e.key === "ArrowUp") { e.preventDefault() if (flatItems.length === 0) return setActiveIndex((i) => (i - 1 + flatItems.length) % flatItems.length) } else if (e.key === "Enter") { e.preventDefault() const item = flatItems[activeIndex] if (item) selectItem(item) } } // Scroll active item into view React.useEffect(() => { const el = listRef.current?.querySelector("[data-active='true']") el?.scrollIntoView({ block: "nearest" }) }, [activeIndex]) return ( ) }

No results found.

Prop	Type	Required	Description
`groups`	`CommandMenuGroup[]`	yes	Grouped command items.
`open`	`boolean`	yes	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	yes	Open state change handler.