Mechanical Keyboard
Full Mac keyboard with tactile depth-button keycaps — lifts on hover, snaps on press, plays synthesised mechanical click sounds via WebAudio.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/mechanical-keyboard.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/mechanical-keyboard.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| enableSound | boolean | true | Play WebAudio mechanical click sounds on press and release. |
| showPreview | boolean | false | Float key-legend ghosts above the board as keys are pressed. |
| variant | "default" | "accent" | "default" | default = themed ink glass. accent = purple keycaps. |
| keyDepth | number | 3 | Height of the raised keycap block in pixels. |
| onKeyPress | (code: string) => void | — | Callback fired on each key press with the KeyboardEvent.code value. |
| className | string | — | Additional CSS classes for the outer wrapper. |