Overview
Components
Text Animations
Keyboard Shortcut
Display keyboard shortcuts with proper key symbols.
runed
⌥ ENTER ␣ ⌃J HOLD ↑
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/kbd.json
Install dependencies
Install the required packages for this component:
pnpm add runed
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
⌘ ⌃ ⌥ ↑ ↓ ← →
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 | '' | |