Kbd
Keyboard shortcut visualization with platform detection and key combination formatting
Kbd
Display keyboard keys, shortcuts and combinations with support for variants, sizes, custom separators and a rich composition API.
Basic keys
Use Kbd to render individual keys like letters, arrows or special keys.
Modifier symbols
Render common modifier symbols like Command, Shift, Option and Control using unicode glyphs.
Command
⌘Shift
⇧Option
⌥Control
⌃Enter
⏎Delete
⌫Escape
⎋Tab
⇥Key combinations
Group multiple keys together with KbdGroup to describe keyboard shortcuts.
Variants & colors
Control appearance using variant and semantic color variants on KbdGroup.
Default
Bordered
Solid
Primary
Success
Warning
Error
Info
Sizes
Adjust the overall size of key groups using the size prop.
Small
Medium
Large
Custom separators
Add visual separators between keys using the separator prop on KbdGroup.
Composition API
Use KbdKey and KbdDescription inside Kbd for rich key descriptions, ideal for legend UIs or onboarding.
States & real-world shortcuts
Highlight normal, pressed and disabled states, and combine them for real-world shortcuts in your UI.
Normal
⌘Pressed
⌘Disabled
⌘Quick command
Open command palette
Vim navigation
Go to first line
Force quit
macOS force quit dialog
Usage Guidelines
When to Use
- Keyboard shortcuts
- Hotkey documentation
- Command references
Accessibility
- Proper key semantics
- Platform-specific modifiers
Performance
- Static rendering
- No JavaScript
Common Mistakes
- Wrong platform modifier
- Not using for actual shortcuts
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support