KQ-1101 · KEYCAP/PRESS

Keycap Press

A mechanical keycap that is a real button: it goes down when it is clicked, when Space or Enter presses it, and when its own shortcut is typed anywhere on the page, and it stays down for as long as the key is held. The switch sets the stroke — a clicky cap holds at the jacket on a decelerating tween then slams to the floor on an underdamped spring that rattles off the bottom, a tactile cap hitches at a softer bump and lands composed, a linear cap falls in one smooth stroke — and every cap returns on the same stem spring carrying its release velocity. The legend lights at actuation, and the switch sounds on the frame the cap passes each point.

KQ-1101 · KEYCAP/PRESS

Basinworks billing

Invoice 2291 is ready

inbox · press e or click archive

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/keycap-press

Props

label: string; default —; The action, in a word or two: the key's accessible name, and the label legend.
shortcut: string; default —; The real key that presses it from anywhere on the page: "e", "shift+r", "mod+enter", "space", "/". mod is Command on Apple platforms and Ctrl elsewhere.
onPress: (via: "pointer" | "keyboard" | "shortcut") => void; default —; Fires once per press, with what pressed it: on the click for pointer and keyboard presses, on keydown for the shortcut.
switch: "clicky" | "tactile" | "linear"; default "clicky"; Sets the travel curve and the sound: a jacket that gives and slams with a click, a rounded bump and a thock, or one smooth stroke and a muted thud.
height: number; default 8; The cap's skirt height in px, 4 to 14. Travel is 0.7 of it, and a taller cap sounds deeper.
legend: "both" | "key" | "label"; default "both"; What is printed on the cap: the key glyph over the label on a 1.5u cap, the key glyph alone on a 1u cap, or the label alone on a cap that widens to fit.
glow: boolean; default true; A backlight halo in the well around the cap, faint at rest and blooming with the legend on actuation.
sound: boolean; default false; Play the switch's synthesised sounds. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the key, blocks presses and stops listening for the shortcut.
className: string; default —; Merged onto the button's classes.

Prop	Type	Default	Description
label	string	—	The action, in a word or two: the key's accessible name, and the label legend.
shortcut	string	—	The real key that presses it from anywhere on the page: "e", "shift+r", "mod+enter", "space", "/". mod is Command on Apple platforms and Ctrl elsewhere.
onPress	(via: "pointer" \| "keyboard" \| "shortcut") => void	—	Fires once per press, with what pressed it: on the click for pointer and keyboard presses, on keydown for the shortcut.
switch	"clicky" \| "tactile" \| "linear"	"clicky"	Sets the travel curve and the sound: a jacket that gives and slams with a click, a rounded bump and a thock, or one smooth stroke and a muted thud.
height	number	8	The cap's skirt height in px, 4 to 14. Travel is 0.7 of it, and a taller cap sounds deeper.
legend	"both" \| "key" \| "label"	"both"	What is printed on the cap: the key glyph over the label on a 1.5u cap, the key glyph alone on a 1u cap, or the label alone on a cap that widens to fit.
glow	boolean	true	A backlight halo in the well around the cap, faint at rest and blooming with the legend on actuation.
sound	boolean	false	Play the switch's synthesised sounds. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the key, blocks presses and stops listening for the shortcut.
className	string	—	Merged onto the button's classes.