Keyboard shortcuts overlay
The reference sheet that makes a product's keyboard model learnable in one glance.
Navigation & Command · 7 checks · 10 resources
Before you ship
7- 01Opened by the conventional key — ? or Cmd+/ from any screen, and also linked from the help menu
- 02Grouped by task area — navigation, editing, selection, view, with the current context's group shown first
- 03Platform-correct key glyphs — Cmd on macOS and Ctrl on Windows and Linux, detected rather than hardcoded
- 04Only shortcuts that are actually bound and currently valid — nothing aspirational or context-invalid
- 05Searchable when the list is long — filtering by command name or by key
- 06Custom bindings reflected — if the product allows rebinding, the overlay shows the user's own keys
- 07Dismissable with Escape and by clicking outside, returning focus to where it was
Resources that help you build this
10- ARIA Authoring Practices Guide · W3C's 30 canonical widget patterns with keyboard maps and working HTML examples
- Kumo · Cloudflare's production React library: 44 components on Base UI + Tailwind v4, MIT
- Intent UI · 80+ React Aria components with real ARIA semantics, MIT and copy-paste
- OpenTUI · React, Solid and TypeScript renderers for terminal UIs, on a native Zig core
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registry
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kits
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTML
- Shadcn UI Blocks · 200+ free copy-paste marketing and app blocks built on shadcn/ui
- termcn · Terminal UI components for React, installed with the shadcn CLI, on Ink and OpenTUI
- Toolcraft · MIT React starter for canvas design tools, with agent docs baked in