Modal command surface with grouped entries, search filtering, and keyboard navigation. Toggle with a global shortcut; Escape closes the dialog.
Press ⌘ K (or Ctrl K) to toggle. Filter by typing; use arrows and Enter.
1"use client";2 3import { CommandPalette } from "@/components/CommandPalette";4 5const groups = [6 {7 id: "nav",8 heading: "Navigation",9 items: [10 { id: "home", label: "Home", onSelect: () => router.push("/") },11 ],12 },13];14 15<CommandPalette16 open={open}17 onOpenChange={setOpen}18 groups={groups}19 title="Command palette"20 placeholder="Search pages and actions…"21/>