Kbd Component
Capsule-shaped keyboard keys with solid ink borders for displaying keyboard shortcuts.
Accent Variant
Highlighted keys with accent color for emphasis and visual distinction.
Accent filled⌘K
Open Command Palette⌘⇧P
Size Variants
Keys come in three sizes: small, default, and large.
Small
KEnterS
Default
KEnterS
Large
KEnterS
Interactive Keys
Keys with hover and click feedback. Try clicking on them!
ABCEnterSpaceEsc
Last pressed: NoneTotal clicks: 0
Mini Keyboard
Interactive keyboard layout demo. Hover and click to see the effects.
QWERTY
ASDFGH
ZXCV
Space
Arrow Keys
Navigation keys with interactive feedback.
Basic Keys
KEnterEscapeTabSpaceBackspaceDelete
Modifier Keys
CtrlAltFn
Keyboard Shortcuts
CopyC
PasteV
SaveS
UndoZ
Select AllA
Complex Shortcuts
Open Command PaletteP
Toggle Developer ToolsI
Force RefreshR
Screenshot Selection4
Custom Styles
Additional style variants for different contexts.
Filled styleCtrlC
Muted styleAltTab
Secondary bgEnterSpace