Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Keyboard shortcuts about keyboard navigation need visible focus. This React pattern shows KbdGroup with focus ring on the Cmd key using ring-2, ring-ring, and ring-offset-2 classes—clearly indicates keyboard focus for accessible navigation. Built with shadcn/ui Kbd components, it's perfect for interactive keyboard trainers, accessible shortcut interfaces, focus-visible demonstrations, keyboard-only navigation tutorials, or any clickable keyboard shortcut interface requiring clear focus indicators.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Active State
Highlighted pressed key
Hover State
Hover effects on keys
Pressed Down State
Physical press effect
Button Focus
Button focus state
Input Focus
Input focus indicator
Keyboard Shortcut
Standard shortcut display
Questions you might have
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
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