Components
Kbd
Displays a keyboard key or key combination using the semantic <kbd> element.
Install
npx shadcn@latest add https://atomx.acau.net/r/kbd.jsonUsage
Render a single key with <Kbd> and a combination with <KbdGroup>. Both use the semantic <kbd> element so screen readers announce them as keyboard input. Useful inside tooltips, command menus, and inline help text.
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>Preview
Single keys
EscTab↵
Combinations
Save:⌘SSearch:⌘KQuit:⌘Q
Props
| Component | Extends | Notes |
|---|---|---|
Kbd | <kbd> | Single key cap. |
KbdGroup | <kbd> | Wraps multiple Kbds as a combination. |