Playground

import { useState } from "react";
import { GlyphX, type Command } from "glyphx";
import "glyphx/style.css";

const commands: Command[] = [
  {
    id: "home",
    title: "Go to Home",
    subtitle: "The start page",
    keywords: ["start", "dashboard"],
    shortcut: "⌘ H",
    group: "Navigation",
    run: () => {
      // your code
    },
  },
  {
    id: "settings",
    title: "Open Settings",
    subtitle: "Account and billing",
    keywords: ["preferences", "config"],
    shortcut: "⌘ ,",
    group: "Navigation",
    run: () => {
      // your code
    },
  },
  // …and 6 more
];

export function CommandPalette() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Open the palette
      </button>
      <GlyphX
        commands={commands}
        open={open}
        onOpenChange={setOpen}
      />
    </>
  );
}