Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Special Keys
A React keyboard display showing Esc, Tab, and Enter special keys using shadcn/ui Kbd components for documenting essential keyboard shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React kbd - 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
React kbd - Modifier Keys
A React keyboard display showing Shift, Ctrl, and Alt modifier keys using shadcn/ui Kbd components for documenting keyboard shortcut combinations