Kbd
Display keyboard shortcuts and key combinations with proper styling
Kbd renders a keyboard key or shortcut with key-cap styling. Use it in docs, tooltips, command menus, and shortcut lists to show combinations like ⌘ K or Ctrl + S. Pass keys to render a combination, and it converts named keys to platform symbols automatically.
Preview
Installation
Usage
Examples
Size Variants
Use size to set the key's height and text size.
| Size | Description |
|---|---|
sm | Compact key for dense UI. |
md | The default key size. |
lg | Larger key for emphasis. |
Color Variants
Use variant to set the key's color scheme.
| Variant | Description |
|---|---|
default | Card-colored key with a subtle border. |
primary | Solid primary-colored key. |
secondary | Solid secondary-colored key. |
outline | Borderless, transparent key. |
ghost | Muted key with no border or shadow. |
danger | Destructive-colored key. |
Manual Key Combinations
Compose multiple Kbd elements to build a combination by hand.
Key Combinations with Props
Use keys to render a combination from an array, joined by separator.
Special Keys with Auto Conversion
Named keys like cmd and shift convert to symbols automatically.
Platform Detection
Use platform to force mac or windows symbols, or leave it auto to detect the user's OS.
In Context
Place Kbd inline within prose to reference a shortcut.
Press ⌘ + K to open the command palette
Use ↑ ↓ to navigate and ↵ to select
Press Esc to close any dialog
Keyboard Shortcuts List
Pair labels with Kbd to document a set of shortcuts.
Live Keyboard Input Detection
Reflect the keys the user is pressing in real time.
Try typing on your keyboard to see the pressed state:
States
Use pressed and disabled to show active or unavailable keys.
API Reference
Kbd is a custom styled kbd element. All props are custom or standard kbd attributes passed through.
Props
Kbd
Keyboard key or shortcut with key-cap styling.