CommandPalette

const [open, setOpen] = useState(false);

useEffect(() => {
  const down = (e) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      setOpen((open) => !open);
    }
  };
  document.addEventListener("keydown", down);
  return () => document.removeEventListener("keydown", down);
}, []);

return (
  <CommandPalette
    open={open}
    onOpenChange={setOpen}
    commands={[
      {
        group: "Navigation",
        items: [
          { label: "Home", icon: "Home", onSelect: () => router.push("/") },
          { label: "Dashboard", icon: "LayoutDashboard", onSelect: () => router.push("/dashboard") },
        ],
      },
      {
        group: "Actions",
        items: [
          { label: "Create Project", icon: "Plus", onSelect: createProject },
          { label: "Settings", icon: "Settings", onSelect: openSettings },
        ],
      },
    ]}
  />
);