Copy Confirm

Renders a button with icon and text that changes on click. It shows a checkmark after copying and reverts. It uses animations for transitions. Use it when needing a visual confirmation after copying text.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/copy-confirm

npx layro-cli add @watermeloncorp/copy-confirm

npx layro-cli add @watermeloncorp/copy-confirm

bunx layro-cli add @watermeloncorp/copy-confirm

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import {
  Boxes,
  CheckIcon,
  CopyIcon,
  Settings2,
} from 'lucide-react';
import { AnimatePresence, motion } from 'framer-motion';
import { type ReactNode, useState } from 'react';

interface SkillCardProps {
  title?: string;
  icon?: ReactNode;
  valueToCopy?: string;