KQ-1664 · CHORD/RECORDER

Chord Recorder

A keyboard shortcut editor whose bindings become recording wells: every key pressed drops in as a keycap from above the rim on springs.snap, lit and pressed down while it is held, and the first key that is not a modifier completes the chord. A taken chord tints the well and nudges the row that owns it sideways on springs.snap, offering Swap, which trades the two bindings and drops both rows' keys in afresh. Enter starts recording, Escape cancels, Backspace clears, Up and Down walk the bindings, and modifier labels follow the platform.

KQ-1664 · CHORD/RECORDER

Keyboard shortcuts

General4

Open command menu
Search everywherePages, people and comments
New page
Open settings

Go back
Go forward
Jump to inbox
Recent pages

Editing5

BoldThe selection, or what you type next
Italic
Insert link
Add comment
Copy link to block

View4

Toggle sidebar
Focus modeHides everything but the page
Zoom in
Zoom out

17 shortcuts · enter on a binding to record

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/chord-recorder

Props

commands: ChordCommand[]; default defaultChordCommands; The commands, grouped by area: { id, label, area, binding, defaultBinding?, description? }. Bindings are platform-neutral strings such as "Mod+Shift+K" (Mod is Command on a Mac, Control elsewhere).
value / defaultValue: Record<string, string | null>; default — / each command's binding; Bindings by command id, controlled or initial; null is no shortcut.
onValueChange: (bindings: Record<string, string | null>) => void; default —; Fires with every binding after a record, clear, swap or reset.
onBind: (id: string, binding: string | null) => void; default —; A command got a new shortcut, or lost it (null).
onSwap: (id: string, otherId: string, binding: string) => void; default —; A clash was settled by swapping: id took binding and otherId took what id had.
onReset: (id: string | null) => void; default —; Reset was pressed for one command, or Reset all (null).
platform: "auto" | "mac" | "other"; default "auto"; Which modifier labels to draw: glyphs on a Mac, words elsewhere. Auto reads the platform after mount, so server and first render agree.
defaultQuery: string; default ""; Text in the search field at first.
requireModifier: boolean; default true; A chord needs Command, Control or Option/Alt unless it is a function key; a bare key is refused with a note.
status: "ready" | "loading" | "error"; default "ready"; Whether the shortcuts have loaded; loading shows skeleton rows and error offers Try again.
onRetry: () => void; default —; Try again was pressed after the shortcuts failed to load.
keycapStyle: "raised" | "flat" | "outline"; default "raised"; Keycap look: a raised key with a lip, a flat tile, or a hairline outline.
density: "compact" | "regular" | "roomy"; default "regular"; Row height, keycap size and type size.
accent: "cobalt" | "signal" | "amber" | "graphite" | string; default "cobalt"; Lit keys, the recording well and search marks: a named token or any CSS colour.
sound: boolean; default false; Play a click as each key lands, a lower one when a chord commits or clashes.
title: string; default "Keyboard shortcuts"; The heading and the editor's accessible name.
height: number; default 520; Height of the editor, px; the list scrolls inside under sticky area headings.
disabled: boolean; default false; Bindings cannot be recorded, cleared or reset; the editor dims.
className: string; default —; Classes for the outer editor.

Prop	Type	Default	Description
commands	ChordCommand[]	defaultChordCommands	The commands, grouped by area: { id, label, area, binding, defaultBinding?, description? }. Bindings are platform-neutral strings such as "Mod+Shift+K" (Mod is Command on a Mac, Control elsewhere).
value / defaultValue	Record<string, string \| null>	— / each command's binding	Bindings by command id, controlled or initial; null is no shortcut.
onValueChange	(bindings: Record<string, string \| null>) => void	—	Fires with every binding after a record, clear, swap or reset.
onBind	(id: string, binding: string \| null) => void	—	A command got a new shortcut, or lost it (null).
onSwap	(id: string, otherId: string, binding: string) => void	—	A clash was settled by swapping: id took binding and otherId took what id had.
onReset	(id: string \| null) => void	—	Reset was pressed for one command, or Reset all (null).
platform	"auto" \| "mac" \| "other"	"auto"	Which modifier labels to draw: glyphs on a Mac, words elsewhere. Auto reads the platform after mount, so server and first render agree.
defaultQuery	string	""	Text in the search field at first.
requireModifier	boolean	true	A chord needs Command, Control or Option/Alt unless it is a function key; a bare key is refused with a note.
status	"ready" \| "loading" \| "error"	"ready"	Whether the shortcuts have loaded; loading shows skeleton rows and error offers Try again.
onRetry	() => void	—	Try again was pressed after the shortcuts failed to load.
keycapStyle	"raised" \| "flat" \| "outline"	"raised"	Keycap look: a raised key with a lip, a flat tile, or a hairline outline.
density	"compact" \| "regular" \| "roomy"	"regular"	Row height, keycap size and type size.
accent	"cobalt" \| "signal" \| "amber" \| "graphite" \| string	"cobalt"	Lit keys, the recording well and search marks: a named token or any CSS colour.
sound	boolean	false	Play a click as each key lands, a lower one when a chord commits or clashes.
title	string	"Keyboard shortcuts"	The heading and the editor's accessible name.
height	number	520	Height of the editor, px; the list scrolls inside under sticky area headings.
disabled	boolean	false	Bindings cannot be recorded, cleared or reset; the editor dims.
className	string	—	Classes for the outer editor.