Kbd
Kbd displays a key or keyboard shortcut to guide people through keyboard interactions.
A key chip in a monospace font on background-3, with a stroke-1 border and a thicker bottom edge like a real key. KbdGroup joins several keys into a combination (Ctrl + K) using nested <kbd> elements, as HTML intends.
Ctrl+K
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Kbd, KbdGroup } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Press / to search or Ctrl+K to open the command palette.
In instructions
EscEscUp arrowDown arrow
Size & icon
size small / medium; arrow keys use an icon plus visually hidden (sr-only) text for screen readers.
Usage
Do
- Write key names as printed on the keyboard (Ctrl, Shift, Enter).
- Show the shortcut next to its command (menu, tooltip, button).
Don't
- Don't use Kbd as decoration or as a Badge.
- Don't list combinations of more than 3 keys in one line of text.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size"small" | "medium" | Default: "medium" | Height 16 / 20px. |
| childrenReactNode | Default: — | Key name or icon (with sr-only text, since <kbd> doesn't take aria-label). |
| KbdGroupHTMLAttributes | Default: — | Wraps the Kbd elements and the “+” signs of a key combination. |