shadcn.io is an independent project built on shadcn/ui
⌥ and Tab sit in one group. Option is the Mac name. The demo does not listen for the keys, and the caps ignore the pointer.
Show ⌥ to Mac readers and Alt to everyone else. If the chord would discard work, confirm in an Alert Dialog. In React, Base UI does not map the symbol to a key.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<KbdGroup>
<Kbd>⌥</Kbd>
<Kbd>Tab</Kbd>
</KbdGroup>
</div>FAQ
Should I show ⌥ or Alt for Mac users?
⌥, or the word Option: that's what Mac keyboards and menus say. Alt is the Windows and Linux name for the same key.
What is the ⌥ symbol and how do I type it?
It's the option key sign, U+2325. Paste it from macOS's Character Viewer or copy it from here; it's a plain character in the string.
Which Option shortcuts do Mac users need?
⌥ with the arrow keys moves by word in text, ⌥ Delete deletes a word, ⌥ click on a link downloads it in Safari, and ⌥ shows extra items in many menus.
How do I document Option for special characters?
Option types accents and symbols on Mac: ⌥E then E for é, ⌥G for ©. Avoid ⌥ letter shortcuts in your app for that reason, since they can stop people typing those characters.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
