Shadcn.io is not affiliated with official shadcn/ui
Command with Icon
A React keyboard shortcut displaying Command key with cloverleaf icon using shadcn/ui KbdGroup and Lucide React for Mac shortcut documentation
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.
Command with Icon preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Arrow Keys with Icons
A React keyboard display showing arrow keys with directional icons using shadcn/ui KbdGroup and Lucide React for navigation documentation
Unicode Symbols
A React keyboard display showing Enter, Delete, and Tab using Unicode symbols with shadcn/ui Kbd for lightweight key representation