johnmamanao

Copy Button

Component 1

About

A copy-to-clipboard button that morphs its icon and swaps its label to confirm success without changing size.

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

Code

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

Usage.tsx

import { CopyButton } from "@/components/ui/copy-button";

export default function CopyButtonDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <CopyButton text="npm install @nacre-ui/react" />
    </div>
  );
}

Dependencies

More by johnmamanao

View all
  • Matrix Rain

    Matrix Rain

    83
  • Liquid Metal Shader

    Liquid Metal Shader

    60
  • Signal Reveal Text

    Signal Reveal Text

    41
  • Toolchain Marquee

    Toolchain Marquee

    23
  • Ribbon Fold Loader

    Ribbon Fold Loader

    21
  • Mercury Rail Loader

    Mercury Rail Loader

    18
  • Facet Bloom Loader

    Facet Bloom Loader

    13
  • Tidal Type Text

    Tidal Type Text

    10