Shortcut Recorder
Click a field and press a key combo to record a keyboard shortcut; keys appear as caps, conflicts are flagged.
shortcut-recorder.tsxshortcut-recorder.css
Checking access…
Overview
Click Record and the field pulses while listening. Modifiers light up as you hold them; pressing a non-modifier key completes the combo and shows it as key caps.
Combos already taken by another command are flagged with the command name. Escape cancels, Backspace clears.
When to use
- App settings, editors, command palettes with custom bindings.
When not to use
- Mobile-only products.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/shortcut-recorder.json$
npx shadcn@latest add https://sundaeui.dev/r/shortcut-recorder.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/shortcut-recorder.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/shortcut-recorder.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy shortcut-recorder.tsx and shortcut-recorder.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ShortcutRecorder } from '@/components/sundae/shortcut-recorder'
<ShortcutRecorder />Props
| Prop | Type | Default |
|---|---|---|
value / defaultValueKeys, e.g. ["Meta", "K"]. | string[] | — |
onValueChangeCalled when a combo is recorded. | (keys: string[]) => void | — |
takenCombo string → command name, for conflicts. | Record<string, string> | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The recorder is a button that announces “Recording, press a shortcut”.
- The recorded combo is read out in words (“Command Shift K”).
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-skr; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Esc
- Cancel recording
- Backspace
- Clear shortcut
FAQ
- Is Shortcut Recorder free?
- Shortcut Recorder is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Shortcut Recorder?
- Run npx shadcn@latest add https://sundaeui.dev/r/shortcut-recorder.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Shortcut Recorder support keyboard and screen readers?
- The recorder is a button that announces “Recording, press a shortcut”. The recorded combo is read out in words (“Command Shift K”).
- Does Shortcut Recorder respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →Search Field
Forms · RefinedNotification Matrix
Forms · RefinedSettings List
Forms · RefinedAsync Switch
Forms · Refined- Pro
Feature Flag
Forms · Refined Wi-Fi Networks
Forms · Refined