Docs
→Button
→Mechanical Key
Mechanical Key
A single mechanical keycap with press animation and sound.
by Sarthak Kapila
Installation
Usage
Mechanical Key Example
1import SingleKey from "@/components/mech-key";23export default function Example() {4 return <SingleKey keyLabel="⌘" keyValue="Meta" />5}
Understanding the component
The component renders a 3D-styled key that can be pressed by mouse or keyboard. It plays a click sound and simulates down/up travel with CSS transforms.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| keyLabel | string | "⌘" | Visible label on the keycap. |
| keyValue | string | "Meta" | Keyboard key to listen to for press events. |