A premium copy-to-clipboard component for Framer that transforms a simple copy button into a polished interactive experience. Instead of instantly changing text, the component smoothly transitions through three customizable states, making every interaction feel intentional and delightful.
Whether you're displaying an
email address
website URL
coupon code
API key
wallet address
referral link
It makes copying effortless while keeping your interface clean and modern.
No coding is required. Simply drop it onto your canvas, customize it using Framer's native controls, and you're ready to go.
Interaction Flow
The component supports three independent text states.
Default State
Display the original value (email, link, code, etc.)
Hover State
Show a custom prompt like:
Click to Copy
Copy Email
Copy Link
Copy Coupon
Copied State
Instantly changes after clicking.
Examples:
Copied!
Features
Native Clipboard Support
Smooth fade animations between text states
Automatic reset timer
Fully customizable typography
Adjustable animation speed
Custom shadows
Responsive sizing
Native Framer Font Control
Optional icon
Multiple icon styles
Custom icon background
Independent idle and copied colors
Adjustable spacing
Adjustable corner radius
Configurable max width
Lightweight