Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - F1 Help Key
A React keyboard display showing F1 help key using shadcn/ui Kbd component for documenting keyboard shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Hidden shortcuts leave users unaware of help features. This React pattern shows Kbd component displaying F1 key—universal help shortcut in documentation or UI. Built with shadcn/ui Kbd component in bordered container with bg-background, it's perfect for help documentation, keyboard shortcut guides, tutorial overlays, onboarding flows, settings panels, or any interface where displaying F1 help shortcut teaches users to access contextual assistance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
F12 DevTools Key
F12 for developer tools
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
Questions you might have
React kbd - Vim Navigation Keys
Vim-style HJKL navigation Kbd components in horizontal row showing H-J-K-L letters for modal editor movement built with shadcn/ui Kbd
React kbd - F12 DevTools Key
A React keyboard display showing F12 developer tools key using shadcn/ui Kbd component for documenting DevTools shortcuts