Shortcut recorder

Free

Press a key combination to record a keyboard shortcut, with conflict warnings.

Installs components/ui/shortcut-recorder.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/shortcut-recorder.json

Open search

Click, then press the keys.

When to use #

Use it for

Settings where people choose their own shortcuts.
You need to warn about shortcuts already in use.

Skip it when

The shortcut is fixed; show it as text.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/shortcut-recorder.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from ShortcutRecorder and formatShortcut.

example.tsx

import { useState } from "react"
import { ShortcutRecorder } from "@/components/ui/shortcut-recorder"

export function SearchShortcut() {
  const [shortcut, setShortcut] = useState("mod+k");
  return (
    <div className="w-full max-w-xs">
      <ShortcutRecorder label="Open search" value={shortcut} onValueChange={setShortcut} resetValue="mod+k" />
    </div>
  );
}

API reference #