Shadcn.io is not affiliated with official shadcn/ui
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
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.
Platform-Aware Shortcut preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.