Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Platform Specific

Mac Command Symbol Kbd for React

The Mac Command symbol and K grouped as the ⌘K shortcut.

Framework
UI library

Mac users read shortcuts with symbols, the way macOS menus show them. This React example writes the Command key as ⌘, the character printed on Mac keyboards, and groups it with K in a KbdGroup. The symbol is plain text, so it needs no icon and takes the cap's font and color.

Preview

Preview width
⌘K

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

When should I show ⌘ instead of Ctrl?

For Mac users. Detect the platform and switch, as the Platform-Aware Shortcut example does, or show both, like ⌘K / Ctrl K, when you can't know.

What is the ⌘ symbol and how do I type it?

It's the place of interest sign, U+2318. Paste it from macOS's Character Viewer (Ctrl ⌘ Space) or copy it from here; in code it's just a character in the string.

Which ⌘ shortcuts are worth documenting?

The ones specific to your app, plus any standard ones you change. People already know ⌘C, ⌘V, ⌘Z and ⌘S; ⌘K for search or ⌘Enter to send are worth a hint.

Why do Macs use Command instead of Ctrl?

The first Macintosh gave app shortcuts their own key, so Control could keep its terminal meaning. That's why Mac shortcuts use ⌘ where Windows uses Ctrl.

Do screen readers read ⌘?

VoiceOver reads it as command, but other screen readers may read the Unicode name or skip it. Add Command as visually hidden text inside the cap, with the symbol hidden, when it matters.

How do I show the Windows equivalent?

Usually Ctrl replaces ⌘: ⌘K becomes Ctrl K. Show the user's own version, or both side by side in docs.

All 39 kbd examples