Key Screen — Harshal

press any key

Features

Listens to keydown / keyup events globally and renders the active key combo as styled keycaps.
Modifier keys (Ctrl, ⌘, Alt, Shift) are captured and ordered consistently before regular keys.
Special keys are normalized to readable symbols — Space, ↵, ⌫, ↑, ↓, ←, →, Esc, and more.
Combo history shows the last N presses, fading older entries and removing the current one after a configurable delay.
Five anchor positions: bottom-left, bottom-right, bottom-center, top-left, top-right.
Keycap styling uses shadcn/ui CSS variables — inherits your theme automatically.
pointer-events: none so it never interferes with the page below it.

pnpm dlx shadcn@latest add https://www.harshalvk.com/r/key-screen.json

import { KeyScreen } from '@/components/key-screen';

<KeyScreen position="bottom-left" fadeDelay={1800} historySize={3} />

Prop	Type	Default	Description
`position`	`bottom-left` `bottom-right` `bottom-center` `top-left` `top-right`	`"bottom-left"`	Anchor corner for the floating overlay.
`fadeDelay`	`number`	`1800`	Milliseconds before the current combo fades out after the last keypress.
`historySize`	`number`	`3`	Maximum number of combos shown simultaneously. Older entries scroll off.
`verbose`	`boolean`	`false`	Show full modifier names (`Control`, `Meta`) instead of symbols (`Ctrl`, `⌘`).
`className`	`string`	—	Additional classes applied to the outermost container.

The component attaches listeners directly to window, so it captures keypresses regardless of which element has focus. Wrap it in a context or conditionally render it to scope it to a specific mode (e.g. a "presentation" toggle).
A blur event on window clears the tracked pressed-key set, preventing stuck modifier keys when the user tabs away.
Modifier-only presses (Shift held alone, etc.) do not emit a combo — a regular key must be included.
The keycap depth effect is achieved with an inset box-shadow using --border variables; it follows your shadcn/ui theme without any extra configuration.
For screencasts or live demos, pair with a useHotkeys hook from react-hotkeys-hook to trigger side-effects on specific shortcuts while KeyScreen handles the visual feedback independently.