ns-ui
Copy-to-clipboard button whose confirmation shows what got copied: a duplicate of the source text visibly peels off the line and travels the real distance to the clipboard glyph before fading, arriving as the glyph gives a small catch-bounce and the label ticks to "Copied".
Use when copying API keys, code snippets, install commands or share links, where the confirmation should visibly carry the actual copied text so the user can eyeball that the right value left — pick rating-stamp instead for a rating/level input, unrelated to clipboard actions.
Install
npx shadcn add https://design.helpmarq.comns-ui / copy-button-travel
API key
ns_demo_51Hb2c9k3f8G4mZ2qX7wA1pInstall command
npx shadcn@latest add copy-button-travelShare link
https://ns-ui.dev/s/8f2c-9d41-liftClick Copy — a translucent duplicate of the text peels up and drifts toward the clipboard glyph, which gives a small settle bounce as the label ticks to "Copied".
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | The full string that gets copied to the clipboard. Also what is displayed. |
| description? | string | — | Short description of what this copies, e.g. "API key" or "Invite link". Used to build the button's accessible name: "Copy {description}". Falls back to a truncated preview of `value` if omitted. |
| copyLabel? | string | — | Label shown at rest. @default "Copy" |
| copiedLabel? | string | — | Label shown for 2s after a successful copy. @default "Copied" |
| className? | string | — | — |