Copy Button

Minimalist icon-only copy button with optical blur and vertical translation feedback animation.

1import * as React from "react";
2import { CopyButton } from "@/components/copy-button";
3 
4export default function CopyButtonDemo() {
5  return (
6    <div className="flex items-center gap-3">
7      <CopyButton text="https://ashutoshtiwari.me" />
8    </div>
9  );
10}

Installation

bunx --bun shadcn@latest add https://ashutoshtiwari.me/r/copy-button.json

Usage

1import { CopyButton } from "@/components/copy-button"

1<CopyButton text="https://ashutoshtiwari.me" />

API Reference

Prop	Type	Default	Description
`text`	string	required	Text string to copy into the user's clipboard.
`successMessage`	string	"Copied to clipboard"	Toast notification message displayed on successful copy.
`className`	string	""	Additional CSS classes applied to the button element.