Shadcn.io is not affiliated with official shadcn/ui
Special Keys
A React keyboard display showing Esc, Tab, and Enter special keys using shadcn/ui Kbd components for documenting essential keyboard shortcuts
Esc to cancel, Tab to navigate, Enter to confirm—these three keys are muscle memory. This React pattern displays essential special keys using shadcn/ui Kbd components with gap-1 spacing. Perfect for form documentation, modal instructions, keyboard navigation guides, accessibility documentation, or any interface teaching users the universal keyboard interactions that work across all applications and platforms.
Special Keys preview
Installation
Related Components
Modifier Keys
Shift, Ctrl, Alt keys
Editing Keys
Home, End, PgUp, PgDn keys
F1 Help Key
Function key display
Basic Kbd
Simple keyboard key display
Dialog
Modal with Esc to close
Form
Form with Enter to submit
FAQ
Was this page helpful?
Sign in to leave feedback.
Function Keys Row
A React display showing complete F1-F12 function keys row using shadcn/ui Kbd components with Array.from for keyboard shortcut reference
Modifier Keys
A React keyboard display showing Shift, Ctrl, and Alt modifier keys using shadcn/ui Kbd components for documenting keyboard shortcut combinations