Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Mac Control Symbol
Mac Control key Kbd component showing ⌃ symbol in KbdGroup for macOS system shortcuts built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Mac uses both Command and Control keys differently—Control for system functions, Command for apps. This React pattern uses KbdGroup wrapping Kbd components displaying ⌃ symbol (Unicode 2303) with second key showing Mac Control shortcuts like Control+Space for Spotlight. Built with shadcn/ui Kbd component, it's perfect for Mac system documentation, accessibility shortcut guides, developer terminal references, or any macOS interface documenting Control key shortcuts where authentic ⌃ symbol matches Mac keyboard labels and system conventions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Mac Command Symbol
Mac Command key with ⌘ symbol
Mac Option Symbol
Mac Option key with ⌥ symbol
Platform-Aware Shortcut
Auto-detects Mac vs Windows for adaptive shortcuts
Windows Key
Windows key shortcuts for PC users
Keyboard Shortcuts
Multi-key shortcut combinations
Horizontal Arrow Keys
Grouped keyboard keys
Questions you might have
React kbd - Platform-Aware Shortcut
Platform-aware Kbd component using navigator.platform detection to show ⌘ on Mac or Ctrl on Windows for cross-platform keyboard shortcuts built with shadcn/ui
React kbd - Active State
A React keyboard shortcut showing active/pressed key state with bg-primary styling using shadcn/ui Kbd component to indicate currently pressed keys