Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Mac Command Symbol
Mac Command key Kbd component showing ⌘ symbol in KbdGroup for macOS keyboard shortcuts built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Mac users expect the Command symbol, not Ctrl text—documentation needs platform-specific keys. This React pattern uses KbdGroup wrapping Kbd components displaying ⌘ symbol (Unicode 2318) with second key showing Mac-specific shortcuts like Command+K. Built with shadcn/ui Kbd component, it's perfect for Mac app documentation, design tool shortcuts, developer tool guides, or any interface targeting macOS where authentic Command symbol creates familiar native feel for Mac users.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Platform-Aware Shortcut
Auto-detects Mac vs Windows for adaptive shortcuts
Windows Key
Windows key shortcuts for PC users
Mac Option Symbol
Mac Option key with ⌥ symbol
Mac Control Symbol
Mac Control key with ⌃ symbol
Keyboard Shortcuts
Multi-key shortcut combinations
Horizontal Arrow Keys
Grouped keyboard keys
Questions you might have
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
React kbd - Mac Option Symbol
Mac Option key Kbd component showing ⌥ symbol in KbdGroup for macOS Alt key shortcuts built with shadcn/ui