Display keyboard shortcuts with proper key symbols.
runed
⌥ ENTER ␣ ⌃J HOLD ↑
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
keyboard-shortcut.svelte
index.ts
Folder Structure
Folder Structure
Examples
Live Keyboard Listening
Enable keyboard listening to highlight the keycap automatically when the matching shortcut is currently pressed.
⌘ ⌃ ⌥ ↑ ↓ ← →
Custom Display with Keyboard Listener
Press M key to activate
HOLDProps
| Name | Type | Default | Description |
|---|---|---|---|
keys | (string | { display: string; key: string })[] | [] | |
active | boolean | false | |
listenToKeyboard | boolean | false | |
class | string | undefined | '' | |