Installation

pnpmnpmyarnbun
bunx --bun shadcn@latest add https://ui.ahmet.studio/r/shortcut-recorder
Copy

Usage

Copyimport {
  ShortcutRecorder,
  useKeyboardShortcut,
} from "@/components/ui/shortcut-recorder";

export function Demo() {
  const [shortcut, setShortcut] = React.useState<string[]>(["Meta", "K"]);

  useKeyboardShortcut(shortcut, (e) => {
    e.preventDefault();
    console.log("Shortcut fired!");
  });

  return <ShortcutRecorder value={shortcut} onChange={setShortcut} />;
}

Why this is unique

Most registries ship a static <Kbd> component. This component actually records shortcuts from real key events and gives you:

• A token-based representation (["Meta", "Shift", "K"]) you can persist anywhere.
• Automatic Mac/Windows symbol formatting (⌘/⌥/⌃/⇧ vs Ctrl/Alt/Shift/Win).
• A useKeyboardShortcut(tokens, handler) hook to bind a recorded shortcut directly.
• A shortcutMatches(event, tokens) helper for custom listeners.
• Conflict detection via the forbidden prop.

Props

Helpers

Copyimport {
  formatShortcut,
  shortcutMatches,
  useKeyboardShortcut,
} from "@/components/ui/shortcut-recorder";

formatShortcut(["Meta", "K"]);
shortcutMatches(event, ["Meta", "K"]);
useKeyboardShortcut(["Meta", "K"], (e) => {});