Mac Keyboard — React Component
Fully interactive Mac-style keyboard with Web Audio synthesised click sounds, Framer Motion keycap animations, and real-time physical keyboard highlighting.
Mac Keyboard — Variant 1
Playground
Shape the component before you copy it.
Adjust the important props for this component and grab JSX that matches your choices.
layout
Full layout or compact (no Fn row).
theme
Visual theme; auto tracks the document dark class.
soundType
Timbre of the synthesised key sound.
Mac Keyboard — Variant 2
Playground
Shape the component before you copy it.
Adjust the important props for this component and grab JSX that matches your choices.
layout
Full layout or compact (no Fn row).
theme
Visual theme; auto tracks the document dark class.
soundType
Timbre of the synthesised key sound.
Animation effects
Copy-paste ready
Use the Code tab above to inspect and copy this component into your project.
About Mac Keyboard
The Mac Keyboard component renders an animated replica of a standard Apple keyboard layout with spring-animated key press physics. Individual keys depress with a Framer Motion spring transition on hover, matching the physical press feel of a real keyboard. Use it in developer tool demos to illustrate keyboard shortcuts, in documentation to highlight key bindings, or as a decorative product visual that communicates the tool is built for keyboard-first users.
Common use cases
- Keyboard shortcut documentation pages
- Developer tool feature illustrations
- Interactive onboarding guides
- CLI and terminal tool marketing pages