AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

sahilcodexComponents & kits

KeyUI

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.

What's interesting

  • Mac and Keychron layouts with live key tracking
  • Optional mechanical sound and web haptics

Use in your project

  1. Wire highlighted keys to your shortcut map.
  2. Decide on haptics and switch sounds for your onboarding flow.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/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].

Tags

KeyboardComponentsHapticsReactInteractionSound