Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Active State
A React keyboard shortcut showing active/pressed key state with bg-primary styling using shadcn/ui Kbd component to indicate currently pressed keys
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When documenting interactive shortcuts, static keys aren't enough. This React pattern shows KbdGroup with active state on the Cmd key using bg-primary and text-primary-foreground classes—visually indicates which key is currently pressed. Built with shadcn/ui Kbd components, it's perfect for interactive tutorials, keyboard trainers, shortcut demonstrations, onboarding flows, or any interface showing real-time key press states to teach users keyboard combinations.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Pressed Down State
Physical press with translate-y
Focus State
Focus ring on keyboard key
Hover State
Hover effects on keys
Keyboard Shortcut
Standard shortcut display
Key Sequence
Sequential key presses
Command Palette
Searchable command shortcuts
Questions you might have
React kbd - Mac Control Symbol
Mac Control key Kbd component showing ⌃ symbol in KbdGroup for macOS system shortcuts built with shadcn/ui
React kbd - Disabled State
A React keyboard key showing disabled state with opacity-50 and cursor-not-allowed using shadcn/ui Kbd component to indicate unavailable shortcuts