Keycap
Keyboard shortcut caps with platform-aware modifier labels and an optional highlight while the real keys are held.
Preview
Inbox shortcuts
Malik’s workspace
- Search messagesCtrl K
- Send reply to InesCtrl Enter
- Move between threadsUp arrowDown arrow
- Assign to TomásA
- Close the threadEsc
Hold any key above and its cap sinks into place.
Priya’s slide deck · step through
Up arrowLeft arrowDown arrowRight arrow
RecordingShift R
New lineShift Enter
Fn layerFn
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | string[] | - | Key tokens such as ["mod", "K"]. mod is Command on Apple devices and Ctrl elsewhere; shift, alt, enter, esc, arrows and more get symbols with spoken names. |
| children | ReactNode | - | Content for a single custom cap when keys is not given. |
| size | "sm" | "md" | "lg" | "sm" | Cap height: 20px, 28px or 36px (lg suits standalone key clusters). |
| variant | "filled" | "outline" | "filled" | Muted fill, or background fill with the border. |
| pressed | boolean | false | Light every cap. |
| listen | boolean | false | Light each cap while its real key is held. Display-only; never prevents the key. |
| platform | "auto" | "mac" | "other" | "auto" | Modifier labels. auto renders non-Mac labels on the server and detects on the client after hydration. |
| className | string | - | Merged onto the root (the group for combos, the cap for a single key). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.