Copy Check

Cards

About

A copy-to-clipboard button whose icon folds into a checkmark and label rolls from "Copy" to "Copied" before resetting.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Copy Check to your project and fits it to your theme.

Code

How Copy Check is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import CopyCheck from "@/components/ui/copy-check";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full items-center justify-center p-8 bg-[#f3f1ec] text-[#1b1a17]">
      <div className="flex w-full max-w-sm flex-col gap-5 rounded-[20px] p-6 bg-white shadow-[0_20px_40px_-24px_rgb(0_0_0/0.35)]">
        <p className="font-mono text-[11px] uppercase tracking-[0.14em] opacity-50">
          API key · test mode
        </p>
        <div className="flex items-center justify-between gap-3 rounded-[12px] px-3 py-2 font-mono text-[13px] bg-black/[0.04]">
          <span className="truncate">vt_test_5f8a2c19e0b7</span>
          <CopyCheck text="vt_test_5f8a2c19e0b7" />
        </div>
      </div>
    </div>
  );
}