Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Command with Icon
A React keyboard shortcut displaying Command key with cloverleaf icon using shadcn/ui KbdGroup and Lucide React for Mac shortcut documentation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
The Mac's iconic cloverleaf—instantly recognizable. This React pattern shows KbdGroup with Command icon from Lucide React (icon-only) plus K key—the visual ⌘ symbol that defines Mac keyboard shortcuts. Built with shadcn/ui Kbd components, it's perfect for Mac app documentation, cross-platform shortcut guides, command palette shortcuts, or any Mac-specific interface showing the Command key that replaced Ctrl for primary shortcuts.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Command Palette
Cmd+K text version
Enter with Icon
Icon with text label
Unicode Symbols
Unicode ⌘ symbol
Modifier Keys
Shift, Ctrl, Alt keys
Copy Shortcut
Ctrl+C for Windows
Command Palette
Full palette component
Questions you might have
React kbd - Arrow Keys with Icons
A React keyboard display showing arrow keys with directional icons using shadcn/ui KbdGroup and Lucide React for navigation documentation
React kbd - Unicode Symbols
A React keyboard display showing Enter, Delete, and Tab using Unicode symbols with shadcn/ui Kbd for lightweight key representation