"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, Copy, TerminalSquare } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; interface Ripple { id: number; } export function CopyButton({ value, label = "Copy", copiedLabel = "Copied", className, onCopy, }: { value: string; label?: string; copiedLabel?: string; className?: string; onCopy?: (value: string) => void; }) { const [copied, setCopied] = useState(false); const [ripples, setRipples] = useState([]); const rippleId = useRef(0); const resetTimer = useRef | null>(null); useEffect( () => () => { if (resetTimer.current) clearTimeout(resetTimer.current); }, [] ); const handleCopy = useCallback(async () => { const id = (rippleId.current += 1); setRipples((prev) => [...prev, { id }]); try { await navigator.clipboard?.writeText(value); } catch { // Clipboard may be unavailable in sandboxed previews. The visual // feedback still fires so the interaction reads correctly. } onCopy?.(value); setCopied(true); if (resetTimer.current) clearTimeout(resetTimer.current); resetTimer.current = setTimeout(() => setCopied(false), 1600); }, [value, onCopy]); return ( {/* Soft ripple, centered, expanding outward on each press */} {ripples.map((r) => ( setRipples((prev) => prev.filter((x) => x.id !== r.id)) } className={cn( "h-8 w-8 rounded-full", copied ? "bg-emerald-300/25" : "bg-white/20" )} /> ))} {/* Icon morphs clipboard -> check with a spring */} {copied ? ( ) : ( )} {label ? ( {copied ? copiedLabel : label} ) : null} ); } const COMMAND = "npx lumenite add copy-button"; export default function Demo() { return (

{/* Card shell */}

{/* Thin bright top edge */}

{/* Header */}

Quickstart bash

{/* Command body */}

Add the component


                $ 
                npx{" "}
                lumenite{" "}
                add{" "}
                copy-button
                {/* Blinking caret keeps the panel alive at rest */}

{/* Footer meta + action */}

1 file, 0 dependencies

); }

Copy Button