shadcn.io is an independent project built on shadcn/ui
Ctrl and C sit in one group, spaced as a single chord. The letters are static. There is no copy handler.
Put this on a copy control, and show ⌘C for Mac. If people can also click, use a Button. In Vue, Ark UI does not write to the clipboard.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<KbdGroup><Kbd>Ctrl</Kbd><Kbd>C</Kbd></KbdGroup>
</div>FAQ
Why is Ctrl C the copy shortcut?
Apple's Lisa and Macintosh put cut, copy and paste on X, C and V, next to each other at the bottom left of the keyboard, where one hand reaches them with the modifier. Windows adopted the same letters with Ctrl, and they became the standard.
Is it Ctrl C everywhere or ⌘C on Mac?
Ctrl C on Windows, Linux and ChromeOS; ⌘C on macOS. Show the one that matches the user's platform, as the Platform-Aware Shortcut example does.
How do I customize what Ctrl C copies?
Listen to the copy event and set the data with event.clipboardData.setData before calling preventDefault. To copy from a button instead, call navigator.clipboard.writeText. Both are browser APIs and work the same in every framework.
Should a custom copy work everywhere or only in some places?
Only where there's something special to copy, such as a selected row in a data grid. Never take over copy in text fields: people expect it to copy their selection.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
