shadcn.io is an independent project built on shadcn/ui
Ctrl and V sit in one group. It reads as one chord. Nothing in the demo reads the clipboard.
Show it beside a paste action, and use ⌘V on Mac. Confirm before a paste that would overwrite, in an Alert Dialog. In React, Base UI does not read the clipboard.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>V</Kbd>
</KbdGroup>
</div>FAQ
Why V for paste when C is copy and X is cut?
The letters were chosen for their place, not their names: Z, X, C and V sit together at the bottom left of the keyboard, next to the modifier. V is often said to look like the caret proofreaders use to mark an insertion.
Is it Ctrl V on Mac?
No, it's ⌘V on macOS and Ctrl V on Windows, Linux and ChromeOS. Show the one that matches the user's platform.
How do I handle pasted content myself?
Listen to the paste event and read event.clipboardData, for text with getData or for images and files with files. Call preventDefault only if you insert the content yourself. These are browser APIs and work the same in every framework.
Should pasted content be validated or transformed?
Often, yes: strip formatting from rich text pasted into a plain field, trim spaces from pasted codes, check the type and size of pasted files. Never insert pasted HTML into the page without sanitizing it.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
