Copy Button
The copy icon blurs into a check that draws itself, then swaps back.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Copy Button
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | |
label | string | — | Optional visible text. |
timeout | number | 1600 | |
onCopied | (value: string) => void | — |
About Copy Button
Copy Button copies text to the clipboard and confirms it: the copy icon blurs into a check that draws itself, then swaps back after a moment.
Copy Button is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Copy Button
- Install commands in docs.
- API keys and tokens.
- Share links and referral codes.
- Code blocks.
How it works
It uses the Clipboard API and announces Copied in a live region. timeout sets how long the check stays, and onCopied lets you track it.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Copy Button
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change timeout, label live, and the Code tab updates to match, so the snippet you copy already carries your values.
- value (string).
- label (string): Optional visible text.
- timeout (number, default 1600).
Goes well with Copy Button
Copy Button is already composed into 3 ready-made sections, so you can see it in context or install the whole block.
- Hero Ember: Hero section
- Hero Terminal: Hero section
- CTA Terminal: CTA section
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Copy Button
npx shadcn@latest add https://charcoalui.com/r/copy-button.jsonCopy Button is free and MIT licensed. The command copies copy-button.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Liquid Metal, a Pro piece: A ring of moving liquid metal around buttons, icons and badges: a wandering halo, a pool of reflected light, and a highlight that swings towards the cursor. Chromatic, silver and gold, plus metal text.
Frequently asked questions
- Does copy button work without HTTPS?
- The Clipboard API needs a secure context, which includes localhost and any HTTPS site, so it works in development and production.
- How do I install Copy Button?
- Run npx shadcn@latest add https://charcoalui.com/r/copy-button.json. The shadcn CLI copies copy-button.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Copy Button free for commercial use?
- Yes. Copy Button is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Copy Button work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Copy Button?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Copy Button's props and source and get_install_command returns the exact command.