Components · primitive
Keys. The shortcut, told visually.
A keycap primitive for docs, tooltips, command palettes, and the help overlay nobody opens until they need it. Single chips, multi-key combos, or full reference lists — platform-aware when you want it to be.
01
Single keys
Use <kbd> directly. The browser already handles semantics; the framework handles the chrome.
Esc
Tab
⏎
A
⌘
⇧
F1
Space
02
Combos
Joined with a thin separator. Press effect plays on hover.
Static
⌘+K
⌘+⇧+P
Ctrl+/
GthenG
Animated press-on-hover
⌘+S
⌥+↑
⌘+,
03
Inline within prose
Press ? to open the keyboard help overlay. Hold ⌘ while clicking a node to multi-select. Use ⌘+K for the command palette, and Esc always backs out.
04
Shortcut reference · platform-aware
Toggle platform — the chips re-render with the matching modifier glyph.
- Command palette
- ⌘+K
- Save
- ⌘+S
- Undo
- ⌘+Z
- Redo
- ⌘+⇧+Z
- Toggle inspector
- ⌥+I
Usage
- Mark up keys with the native
<kbd>element +.kbdclass. - Group with
.kbd-combo; separators are<span class="sep">. - Add
.kbd--pressfor a depress-and-return hover effect. - For platform variants, tag the modifier with
[data-mod]/[data-alt]and swap glyphs in JS.