shadcn.io is not affiliated with official shadcn/ui
Kbd examples · With Icons
Command with Icon Kbd for React
A Command K shortcut with the Command key drawn as an icon.
The cloverleaf on the Mac's Command key is recognized at a glance. This React example draws it with Lucide's Command icon inside a Kbd cap, hidden from screen readers and followed by the visually hidden word Command, and groups it with K in a KbdGroup.
Preview
Installation
FAQ
Should I show the Command icon or the word Cmd?
The symbol is what's printed on the key and in macOS menus, so Mac users recognize it fastest. The word helps people who are new to Mac; docs for beginners can use it.
How do I document a shortcut for Mac and Windows?
Show each person their own keys: ⌘K on Mac, Ctrl K elsewhere, as the Platform-Aware Shortcut example does. In static docs, list both.
Is the icon accessible without a text label?
Not on its own, which is why the icon is hidden with aria-hidden and a visually hidden span says Command. Screen readers read Command K; sighted users see the cloverleaf and K.
Why does the Mac have a Command key?
The Macintosh gave app shortcuts their own key, separate from Control, and marked it with the cloverleaf, a sign used for places of interest. It has been on every Mac keyboard since.
Related
- Command Palette Shortcut KbdThe ⌘K shortcut that opens a command
- Mac Command Symbol KbdThe Mac Command symbol and K grouped as
- Enter with Icon KbdAn Enter key with a return arrow icon
- Unicode Symbols KbdEnter, Delete and Tab keys with a Unicode
- Modifier Keys KbdThe Shift, Ctrl and Alt modifier keys in
- Arrow Keys with Icons KbdUp, down, left and right arrow keys drawn