Shadcn.io is not affiliated with official shadcn/ui
F1 Help Key
A React keyboard display showing F1 help key using shadcn/ui Kbd component for documenting keyboard shortcuts
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.
F1 Help Key preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.