videorc/uiShortcut Keys
The one way to show a shortcut. Takes an Electron accelerator and prints it the way the platform's own menus do, as a keycap or as the status bar's quiet text.
- SearchCtrl+K
- Open PreviewCtrl+P
- Open Stream ManagerCtrl+Shift+J
- Start or stop recordingSpace
Installation
$ pnpm dlx shadcn@latest add @videorc/shortcut-keysUsage
import { ShortcutKeys } from "@/components/ui/shortcut-keys";<ShortcutKeys accelerator="CmdOrCtrl+Shift+J" />Author a shortcut once, as the accelerator Electron binds (CmdOrCtrl+Shift+J, Enter, Space), and print it only through ShortcutKeys. An unbound shortcut (an empty accelerator) renders nothing.
Examples
Per platform
macOS reads as one keycap in system order with its own glyphs (⇧⌘J, ⌘↵, ⌫). Windows and Linux read as words joined by "+" (Ctrl+Shift+J, Ctrl+Enter, Backspace). Pass platform when the app knows it; Electron's process.platform is the value.
| Accelerator | macOS | Windows |
|---|---|---|
| CmdOrCtrl+Shift+J | ⇧⌘J | Ctrl+Shift+J |
| CmdOrCtrl+Enter | ⌘↵ | Ctrl+Enter |
| Shift+Backspace | ⇧⌫ | Shift+Backspace |
| CmdOrCtrl+, | ⌘, | Ctrl+, |
Text
variant="text" is the status bar's quiet hint: the same label with no keycap.
Theming
| Token or attribute | Meaning |
|---|---|
glass-keycap | The chip variant, through Kbd |
data-accelerator | The accelerator it prints, on either variant |
data-slot | kbd for the chip, shortcut-keys for the text |
Accessibility
The label is plain text inside a <kbd> or a <span>. Tell assistive tech about the shortcut on the control it triggers, with aria-keyshortcuts={shortcutAriaKeys(accelerator)} from @/lib/platform (Meta+K on macOS, Control+K elsewhere).
Without platform, ShortcutKeys reads data-platform on <html> (set it before the first paint), then the user agent, so a Mac never flashes "Ctrl" in a window that renders on the client. A server can't know the reader's platform: server-rendered markup prints the Windows spelling, and the client corrects it as it hydrates.
API reference
Every kbd prop except children, plus:
Prop
Type
For running copy and titles, shortcutLabel(accelerator, platform?) from @/lib/platform returns the same label as a string.
Kbd
Videorc's key chip, a glass keycap with a bright top edge and a dark bottom edge. Inside a filled button it takes the button's own ink instead.
Shortcut Tooltip
A control's tooltip with its bound shortcut as one keycap, keyboard-first and quiet. It wraps the control, so the tooltip never touches the control's own attributes.