Installation

Choose your framework to get the right compiler wrapper and runtime setup.

Pick your framework

Install the package

Install the core package into your dependencies:

i react-keybound

Add the 1-line build wrapper

Wrap your configuration file so JSX mnemonics like <button>&Save</button> are transformed into keyboard shortcuts during compilation.

// 1. Import Next.js plugin wrapper
import { withKeybound } from "react-keybound/next";

// 2. Wrap Next.js config (handles <button>&Save</button> automatically)
export default withKeybound({});

// Optional: for custom UI components like shadcn Button:
// export default withKeybound({}, { components: ["Button"] });

Why is withKeybound needed in Next.js?

React renders strings like "&Save" literally as text by default. withKeybound enables a lightweight build-time transform so you can write <button>&Save</button> and <input hotkey="mod+k" /> directly in JSX without manual wrapper tags.

Is components: ["Button"] required? No! Standard HTML tags (<button>, <a>, <input>, <label>, <summary>) work automatically with just withKeybound({}). You only pass components if you use custom design-system buttons (like shadcn <Button>).

Mount KeyboundProvider at your root

Place KeyboundProvider at the root of your application layout. It installs a single global dispatcher with zero extra DOM wrappers.

'use client';

import { KeyboundProvider } from "react-keybound";

import type {} from "react-keybound/jsx";

export function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <KeyboundProvider>
      {children}
    </KeyboundProvider>
  );
}

Write shortcuts in clean JSX

Controls keep their native handlers, focus behavior, and accessibility tree intact.

<button onClick={save}>&Save</button>

<button onClick={exportDoc}>E&xport</button>

<input hotkey="mod+k" placeholder="Search..." aria-label="Search" />

Ready to see it in action?

Explore 8 interactive use cases covering mnemonics, hotkeys, scopes, and visual overlays.

View Examples