Shadcn.io is not affiliated with official shadcn/ui
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
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.
Active State preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.