Shortcut recorder

Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.

$npx shadcn@latest add @silicon-ui/shortcut-recorder

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/shortcut-recorder

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/shortcut-recorder/shortcut-recorder.tsx
- components/silicon-ui/shortcut-recorder/shortcut-recorder.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ShortcutRecorder } from "@/components/silicon-ui/shortcut-recorder/shortcut-recorder";

Prop	Type	Default
`label*`	`string`	—
`hideLabel`	`boolean`	`false`
`value`	`string \| null`	—
`defaultValue`	`string \| null`	`null`
`onValueChange` `replaced` is the binding the new shortcut was taken from after "Use anyway", so the caller can unbind it.	`(value: string \| null, details: { replaced?: ShortcutBinding }) => void`	—
`resetValue` What the reset button restores. Defaults to `defaultValue`.	`string \| null`	—
`bindings` Shortcuts already in use. Recording one of them asks before taking it.	`ShortcutBinding[]`	`[]`
`warnReserved` Also warn about combinations the browser or system keeps, such as ⌘W and ⌘C. On by default.	`boolean`	`true`
`requireModifier` Require ⌘, Ctrl, or ⌥ (function keys are always allowed). On by default.	`boolean`	`true`
`platform`	`Platform` `"mac""other"`	—
`placeholder`	`string`	`"Record shortcut"`
`description`	`string`	—
`disabled`	`boolean`	`false`
`id`	`string`	—
`className`	`string`	—

Prop	Type	Default
`shortcut*`	`string`	—
`platform`	`Platform` `"mac""other"`	—
`pressed` Held key ids from `usePressedKeys`; matching caps light up.	`ReadonlySet<string>`	—
`size`	`"sm" \| "md"`	`"md"`
`className`	`string`	—

Prop	Type	Default
`groups*`	`ShortcutListGroup[]`	—
`label` Accessible name of the list.	`string`	`"Keyboard shortcuts"`
`searchable`	`boolean`	`true`
`searchPlaceholder`	`string`	`"Search shortcuts"`
`highlightPressed` Light up caps as keys are held, and fade rows that do not use the held modifiers. On by default.	`boolean`	`true`
`platform`	`Platform` `"mac""other"`	—
`className`	`string`	—

Prop	Type	Default
`children*`	`ReactNode`	—
`pressed` Draws the key pushed down and lit, such as while it is held.	`boolean`	`false`
`size`	`"sm" \| "md"`	`"md"`

Also accepts the props of HTMLAttributes<HTMLElement>.

Prop	Type	Default
`children*`	`ReactNode`	—
`pressed` Draws the key pushed down and lit, such as while it is held.	`boolean`	—
`size`	`"sm" \| "md"`	—

Also accepts the props of HTMLAttributes.