Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - F12 DevTools Key
A React keyboard display showing F12 developer tools key using shadcn/ui Kbd component for documenting DevTools shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Every developer knows F12. This React Kbd component shows the F12 key—universal shortcut for opening browser DevTools across Chrome, Firefox, Edge, and Safari. Built with shadcn/ui, it's perfect for developer documentation, troubleshooting guides, tutorial content, browser extension docs, or any interface where you need to document the F12 DevTools shortcut that every web developer relies on daily.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
F1 Help Key
F1 for help documentation
Function Keys Row
Complete F1-F12 row display
Special Keys
Esc, Tab, Enter keys
Basic Kbd
Simple keyboard key display
Tooltip with Kbd
Shortcut in tooltip
Command Palette
Searchable command shortcuts