A React keyboard component library with Apple Magic Keyboard and Keychron K2 layouts, physical key tracking, switch sounds, and haptic feedback on supported devices.
Click to zoom- Role
- Frontend & Audio Engineer
- Timeline
- 2 Weeks
- Team
- Solo
- Status
- Completed
Built with
- React
- TypeScript
- Tailwind CSS
- Web Audio
- Web Haptics
The brief
An interactive keyboard has to respond to real key presses as well as clicks and touch. This project combines those inputs with keyboard geometry, sound, and visual feedback.
Built reusable keyboard components and the interface for exploring their layouts and interaction feedback.
Implementation notes
Reflect physical input
Physical key presses activate the corresponding keys in the rendered layout, connecting hardware input to the visual component.
Combine input feedback
Key interactions include switch sounds and haptic feedback on supported touch devices. Sound is configurable through the component interface.
Make the component reusable
The repository provides copyable React components with theme and sound options, including Apple Magic Keyboard and Keychron K2 replicas.
Current result
An interactive demo and reusable keyboard components for React projects, with layout, theme, and feedback behavior visible in the repository.
Interaction is the main feature
The keyboard connects a physical key press to a visible keycap and sound. On compatible touch devices, haptic feedback adds another response to the interaction. The layout matters because differently sized keys must still read as a real keyboard.
Beyond the demo
A component can be configured with a theme and enabled sound, then placed inside another React application. That makes the demo a way to inspect a reusable interface, with the implementation available for developers who want to adapt it.
Device support determines whether haptic feedback is available. The component's visual and sound behavior can be explored directly in the live project.
"You have a right to perform your prescribed duty, but you are not entitled to the fruits of actions."
Design by SahilCodex
© 2026. Built with hands.