Components
Kbd
Display keyboard shortcuts and key combinations with proper styling
Preview
⌘KEscTab↵
Installation
Usage
Examples
Size Variants
Display keyboard keys in different sizes.
⌘⌘⌘
Color Variants
Apply different color schemes to keys.
⌘⌘⌘⌘⌘⌘
Manual Key Combinations
Create custom key combinations manually.
⌘+K
Ctrl+Shift+P
Alt+Tab
Key Combinations with Props
Define key combinations via component props.
⌘+k⌃+⇧+p⌥+⇥⌘ + k
Special Keys with Auto Conversion
Automatically convert special key names to symbols.
⎵↵⌫⌫↑↓←→HomeEndPgUpPgDn
Platform Detection
Detect and display platform-specific key symbols.
Auto:⌘+k
Mac:⌘+k
Windows:Ctrl+k
In Context
Use keyboard shortcuts within documentation.
Press ⌘ + K to open the command palette
Use ↑ ↓ to navigate and ↵ to select
Press Esc to close any dialog
Keyboard Shortcuts List
Display a complete list of available shortcuts.
Open command palette⌘+k
Save document⌘+s
Copy selection⌘+c
Paste clipboard⌘+v
Live Keyboard Input Detection
Detect and display live keyboard input.
Try typing on your keyboard to see the pressed state:
QWERTYUIOP
ASDFGHJKL
ZXCVBNM
SpaceShiftCtrl⌘
States
Show different states like active or disabled.
Normal:⌘
Pressed:⌘
Disabled:⌘