Keyboard
A Mac-style keyboard with real keycap depth, spring presses and synthesised switch sounds by key type, plus a live keystroke row, shortcut glows and auto-typing.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/keyboardOther Examples
Shortcut Hint
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sound | boolean | false | Mechanical key sounds, made in the browser. They start after the visitor's first press. |
volume | number | 0.6 | Loudness of the sounds, from 0 to 1. |
switchType | "tactile" | "clicky" | "linear" | "thock" | "tactile" | How the switches sound: tactile (a soft bump), clicky (a sharp snap), linear (quiet and smooth) or thock (deep and muted). Each kind of key sounds a little different, and long keys rattle on their stabilisers. |
tilt | number | 0 | Tilt the keyboard back, in degrees, as if it sat on a desk. |
listen | boolean | true | Light up keys as they're typed on a real keyboard, while the keyboard is on screen. |
showPreview | boolean | false | A row of the last keys pressed, above the keyboard. |
highlight | string[] | - | Key codes to glow, such as a shortcut: ["MetaLeft", "KeyK"]. Uses KeyboardEvent.code names. |
autoType | string | - | A phrase the keyboard can type by itself. When it types depends on typing. |
typing | "idle" | "auto" | "user" | "idle" | Who types. idle: the keyboard types autoType while nobody is using it, and hands over the moment someone hovers or types. auto: it keeps typing whatever the visitor does. user: only the visitor types; auto-typing is off. |
idleDelay | number | 4 | Seconds without any interaction before auto-typing picks up again (idle mode). |
accentColor | string | "#6366f1" | Colour of highlighted keys. |
onKeyPress | (code: string) => void | - | Called with the key code of every key pressed, so it can work as an input. |
className | string | - | Extra classes for the wrapper; set a max width to size it. |