Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Physical keyboards have tactile feedback—digital ones need visual cues. This React pattern shows KbdGroup with pressed-down effect on the Cmd key using translate-y-0.5 and shadow-none classes—simulates the physical depression of a mechanical key press. Built with shadcn/ui Kbd components, it's perfect for keyboard visualizers, typing tutors, mechanical keyboard simulators, interactive demos showing real-time key presses, or gaming interfaces displaying controller inputs.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Active State
Highlighted pressed key
Focus State
Focus ring on key
Hover State
Hover effects on keys
Button Pressed
Button press effect
Keyboard Shortcut
Standard shortcut display
Key Sequence
Sequential key presses
Questions you might have
React kbd - Focus State
A React keyboard key showing focus state with ring-2 ring-ring ring-offset-2 using shadcn/ui Kbd component for keyboard-navigable shortcuts
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