Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Cross-platform apps need shortcuts that adapt to user's OS—showing ⌘ to Mac users, Ctrl to Windows users. This React pattern detects platform using navigator.platform with indexOf checking for MAC, conditionally rendering Command symbol or Ctrl text in KbdGroup. Built with shadcn/ui Kbd component and use client directive for browser API access, it's perfect for cross-platform web apps, documentation sites, developer tools, or any interface serving both Mac and Windows users where adaptive shortcuts create native experience without maintaining separate documentation versions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Mac Command Symbol
Mac Command key with ⌘ symbol
Windows Key
Windows key shortcuts for PC users
Mac Option Symbol
Mac Option key with ⌥ symbol
Keyboard Shortcuts
Multi-key shortcut combinations
Horizontal Arrow Keys
Grouped keyboard keys
Standard Kbd
Basic keyboard key display