Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Platform-Aware Shortcut Kbd for Ark UI

A shortcut that first paints Ctrl K, then switches the first cap to ⌘ on Apple devices after reading the user agent.

The group renders Ctrl and K first, so the server and the first client paint match. After mount, Apple devices replace Ctrl with ⌘. The keys are still not listened for.

Use this when one hint should match the keyboard in front of the reader, and handle both chords yourself. A Command can be what it opens. In React, Ark UI does not check the platform.

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

Anatomy

Kbd anatomy: kbd, group

Usage

<div className="rounded-md border bg-background p-4">
  <KbdGroup>
    <Kbd>{isApple ? "⌘" : "Ctrl"}</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
</div>

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.

API Reference

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 39 kbd examples