Animated Copy Button

A highly interactive copy-to-clipboard button using Framer Motion with smooth success animations.

How to Import

Add this import to your component file

app/page.tsx

1import { AnimatedCopyButton } from "@/components/lightswind/animated-copy-button"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

textToCopy	string	-	The text that will be copied to the clipboard when clicked.	Required
size	"sm" \| "md" \| "lg"	"md"	The size of the copy button.	Optional
className	string	-	Additional CSS classes for the button.	Optional
onCopy	() => void	-	Optional callback fired when text is successfully copied.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { AnimatedCopyButton } from "@/components/lightswind/animated-copy-button";
2
3export function AnimatedCopyButtonDemo() {
4  return (
5    <div className="flex flex-col items-center gap-4 py-8">
6      <AnimatedCopyButton textToCopy="npm install lightswind-ui" />
7    </div>
8  );
9}

Previousai-loading-state

Nextanimated-notification

A product byＭＵＨＩＬＡＮ and Team❤️.

Animated Copy Button

A highly interactive copy-to-clipboard button using Framer Motion with smooth success animations.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AnimatedCopyButton } from "@/components/lightswind/animated-copy-button"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

textToCopy	string	-	The text that will be copied to the clipboard when clicked.	Required
size	"sm" \| "md" \| "lg"	"md"	The size of the copy button.	Optional
className	string	-	Additional CSS classes for the button.	Optional
onCopy	() => void	-	Optional callback fired when text is successfully copied.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { AnimatedCopyButton } from "@/components/lightswind/animated-copy-button";
2
3export function AnimatedCopyButtonDemo() {
4  return (
5    <div className="flex flex-col items-center gap-4 py-8">
6      <AnimatedCopyButton textToCopy="npm install lightswind-ui" />
7    </div>
8  );
9}

Previousai-loading-state

Nextanimated-notification

A product byＭＵＨＩＬＡＮ and Team❤️.

Animated Copy Button

How to Import

Props

Basic Usage

On This Page

Contribute

Animated Copy Button

How to Import

Props

Basic Usage

On This Page

Contribute

React Animated Copy Button Component - Lightswind UI

Key Details of React Animated Copy Button

Animated Copy Button

How to Import

Props

Basic Usage

On This Page

Contribute

Animated Copy Button

How to Import

Props

Basic Usage

On This Page

Contribute