KeyUI
Interactive keyboard components with optional haptic and mechanical sound: Mac and Keychron layouts that track physical keystrokes in the browser.
What's interesting
- Mac and Keychron layouts with live key tracking
- Optional mechanical sound and web haptics
Use in your project
- Wire highlighted keys to your shortcut map.
- Decide on haptics and switch sounds for your onboarding flow.
Prompt your agent
From AI UX Playground: https://aiuxplayground.com/playground/keyui KeyUI by sahilcodex By sahilcodex, a pair of live keyboard replicas—a low-profile Mac layout and a Keychron-style mechanical board—with press states, optional switch audio, and web haptics. Docs cover shadcn-style install (`pnpm dlx shadcn@latest add mac-keyboard`), sound sprites, and a CustomKeyboard component with dark and light themes. Useful reference for shortcut UIs, onboarding that teaches key combos, and tactile product chrome that reacts to the real keyboard. Add a KeyUI-style keyboard to our shortcut onboarding. Highlight keys for [list shortcuts]. Theme: [light | dark]. Haptics: [yes | no].
