Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ctrl+C, Shift+Tab, Alt+F4—modifiers unlock hundreds of shortcuts. This React pattern displays the three essential modifier keys (Shift, Ctrl, Alt) using shadcn/ui Kbd components with gap-1 spacing. Built for keyboard shortcut documentation, command reference guides, application help screens, or any interface teaching users the modifier keys that combine with other keys to create powerful keyboard shortcuts across all platforms.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Special Keys
Esc, Tab, Enter keys
Editing Keys
Home, End, PgUp, PgDn keys
Function Keys Row
Complete F1-F12 display
Basic Kbd
Simple keyboard key display
Command Palette
Searchable command shortcuts
Tooltip with Kbd
Shortcut in tooltip
Questions you might have
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
React kbd - Editing Keys
A React keyboard display showing Home, End, PgUp, and PgDn editing navigation keys using shadcn/ui Kbd components for text editing documentation