Components
Mechanical keyboard
A mechanical keyboard you can play. Creamy keycaps sink and spring back, RGB underglow runs in a wave and ripples out from every press, and an optional synthesised thock plays with each key. Type in the field above — or click the keys. Full, TKL, 65% or 60%.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { MechanicalKeyboard } from '@vizzele/react';
<MechanicalKeyboard
layout="tkl" // 'full' | 'tkl' | '68' | '60'
rgb="wave" // 'wave' | 'reactive' | 'breathe' | 'static' | 'off'
keycaps="graphite" // 'graphite' | 'milk' | 'lavender' | 'retro'
sound
placeholder="Say something nice…"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
layout | 'full' | 'tkl' | '68' | '60' | 'tkl' | 100%, tenkeyless, 65% (68 keys) or 60%. |
rgb | 'wave' | 'reactive' | 'breathe' | 'static' | 'off' | 'wave' | Underglow. Every mode except off also ripples from each press. |
keycaps | 'graphite' | 'milk' | 'lavender' | 'retro' | 'graphite' | Keycap set. |
sound | boolean | false | A synthesised thock (Web Audio, no files). |
volume | number | 0.6 | 0–1. |
input | boolean | true | The text field above the board. |
value / defaultValue / onValueChange | string | — | The field, controlled or not. |
listen | 'input' | 'window' | 'input' | React to keys typed in the field, or anywhere on the page. |
onKeyHit | (code) => void | — | Every press, with its KeyboardEvent.code. |
tilt | boolean | true | Lean the board back a little. |
Accessibility
- The text field is the accessible part: a labelled input that works like any other.
- The board is a picture of your typing, hidden from screen readers; clicking keys is an extra for the mouse.
- Keys are matched by KeyboardEvent.code, so they light up the same on any keyboard language.
- With reduced motion the colours stand still and the keys move without the spring.
- Sound is off by default and only starts after a key is pressed.