Keyboard shortcuts overlay
Navigation & Command · 7 checks · 11 resources
The reference sheet that makes a product's keyboard model learnable in one glance.
Before you ship
- 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
- ARIA Authoring Practices Guide · W3C's 30 canonical widget patterns with keyboard maps and working HTML examplesDesign Systems & Brand GuidelinesS
- Kumo · Cloudflare's production React library: 44 components on Base UI + Tailwind v4, MITComponent LibrariesS
- Intent UI · 80+ React Aria components with real ARIA semantics, MIT and copy-pasteComponent LibrariesS
- OpenTUI · React, Solid and TypeScript renderers for terminal UIs, on a native Zig coreComponent LibrariesS
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registryComponent LibrariesA
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kitsDesign Systems & Brand GuidelinesA
- 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 HTMLComponent LibrariesA
- Shadcn UI Blocks · 200+ free copy-paste marketing and app blocks built on shadcn/uiBlocks, Templates & ThemesA
- termcn · Terminal UI components for React, installed with the shadcn CLI, on Ink and OpenTUIComponent LibrariesA
- Toolcraft · MIT React starter for canvas design tools, with agent docs baked inAgent Design ToolingA
- Kanbaaan · Kargul Studio's Next.js 16 kanban dashboard sourceBlocks, Templates & ThemesB