Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Mac Option Symbol
Mac Option key Kbd component showing ⌥ symbol in KbdGroup for macOS Alt key shortcuts built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Mac keyboards label it Option with ⌥ symbol, not Alt—authentic documentation matches physical keys. This React pattern uses KbdGroup wrapping Kbd components displaying ⌥ symbol (Unicode 2325) with second key showing Mac Option shortcuts like Option+Tab for window switching. Built with shadcn/ui Kbd component, it's perfect for Mac app documentation, special character input guides, window management shortcuts, or any macOS interface where Option symbol creates native Mac experience matching actual keyboard labels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Mac Command Symbol
Mac Command key with ⌘ symbol
Mac Control Symbol
Mac Control 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