Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Platform Specific

Platform-Aware Shortcut Kbd for React

A shortcut that reads ⌘K on Apple devices and Ctrl K everywhere else.

Framework
UI library

A shortcut hint should show the keys the person actually has. This React example renders Ctrl K at first, then, once the component has mounted, tests the browser's user agent for Mac, iPhone, iPad or iPod and switches the first key to ⌘ when it matches. Both keys sit in a KbdGroup.

Preview

Preview width
CtrlK

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the platform detection work?

After the component mounts, it tests navigator.userAgent against the pattern /Mac|iPhone|iPad|iPod/ and keeps the result in state. The first key shows ⌘ when it matches and Ctrl otherwise; the second is always K.

Why detect the platform after mounting?

A server render has no navigator, so the first render must not depend on it. Starting with Ctrl and switching after mount keeps the server HTML and the first client render the same; Mac users see Ctrl change to ⌘ right away.

What do other platforms see?

Windows, Linux, ChromeOS and Android all show Ctrl K, which is right for them: they use Ctrl for app shortcuts.

Is there a better way to detect the platform?

navigator.userAgentData.platform is cleaner where it exists, but not every browser has it, so the user agent is the fallback. The deprecated navigator.platform still works too. None is perfect: iPads can report a Mac user agent, which here gives the right answer.

How do I test both versions?

Use your browser's developer tools to change the user agent, then reload. Device emulation for an iPhone shows ⌘; a Windows user agent shows Ctrl.

Does switching the label affect accessibility?

The text changes once, right after load, before most people interact. Make the shortcut itself listen for both ⌘ and Ctrl, so it works whatever the label says.

All 39 kbd examples