shadcn.io is an independent project built on shadcn/ui
Three caps sit in a row with a small gap. They are not in a group, so they do not read as one shortcut. Each name is hard-coded.
Use the row on a keyboard reference page. In a real shortcut, group only the keys held together, on Kbd. In Vue, Ark UI does not treat these caps as modifiers.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<div class="flex gap-1"><Kbd>Shift</Kbd><Kbd>Ctrl</Kbd><Kbd>Alt</Kbd></div>
</div>FAQ
Should I show Mac and Windows modifiers separately?
Show the user's own: ⌘ Command, ⌥ Option, ⌃ Control and ⇧ Shift on Mac; Ctrl, Alt and Shift on Windows and Linux. Ctrl usually maps to ⌘ and Alt to ⌥, but not always, so check each shortcut.
Should I document modifiers alone or in shortcuts?
In shortcuts, mostly: a modifier on its own does nothing. A row like this one belongs on a reference page that explains the keys before listing what they combine with.
Should I include the Windows or Command key?
Include ⌘ for Mac users, since most Mac shortcuts use it. The Windows key is mostly reserved for the operating system, so web apps rarely use it.
Are modifier shortcuts accessible?
Holding a modifier while pressing another key is hard for some people. Sticky keys in the operating system help, but every command should also be reachable without a shortcut.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
