Keycap
controlsProA mechanical key with 6px of travel that leans towards where it is pressed, with an optional latch and corner light.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
keycap.tsxPro
The code is locked
Keycap is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/keycapMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
KeycapProps
| Prop | Type | Default | What it does |
|---|---|---|---|
width | number | 72 | Width of the key in pixels. The key is 72px square on top, with 6px of travel below. |
legend | 'center' | 'corner' | 'center' | Where the legend sits: large in the middle, or small in the top-left corner (for esc, shift, tab). |
latch | boolean | false | Latch on each press, like a held modifier, with a small light in the corner. Adds aria-pressed. |
pressed | boolean | – | Controlled latched state, with latch. |
defaultPressed | boolean | false | Latched state on the first render, when uncontrolled. |
onPressedChange | (pressed: boolean) => void | – | Called when a latching key is pressed, with its new state. |
down | boolean | false | Hold the key down from outside, e.g. to mirror a key pressed on the real keyboard. |
Also takes every prop from ButtonHTMLAttributes<HTMLButtonElement>.
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.