Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Hover State
A React keyboard shortcut showing hover state with cursor-pointer and transition-colors using shadcn/ui Kbd for interactive clickable shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Keyboard shortcuts can be more than documentation—they can be interactive. This React pattern shows KbdGroup with hover effects using cursor-pointer, transition-colors, and hover:bg-accent classes on both keys—indicates clickable shortcuts that trigger actions. Built with shadcn/ui Kbd components, it's perfect for virtual keyboards, interactive shortcut menus, clickable command palettes, mobile-friendly keyboard interfaces, or any context where shortcuts are buttons not just visual references.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Active State
Highlighted pressed key
Focus State
Focus ring on key
Pressed Down State
Physical press effect
Button Hover
Button hover state
Keyboard Shortcut
Standard shortcut display
Command Palette
Searchable command shortcuts
Questions you might have
React kbd - Pressed Down
A React keyboard key showing physical pressed-down state with translate-y-0.5 and shadow-none using shadcn/ui Kbd to simulate mechanical key press
React kbd - Key Sequence with Then
Sequential keyboard shortcut Kbd components showing Ctrl+K then B pattern with text separator for multi-step shortcuts built with shadcn/ui