Keycap and keyboard-chord presentation. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
kbd,kbd-group
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<p>Press <span class="kbd-group"><kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd></span> to search.</p>Variants and composition
kbd styles one key; kbd-group keeps a multi-key chord together.
Behavior and accessibility
Use kbd only for keyboard input descriptions, not clickable controls. Write modifier names in text so a chord remains understandable without its icon.
Reference
See the interactive Storybook specimen. Continue to List or return to the Official preset overview.