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

    138
  • Liquid Metal Shader

    Liquid Metal Shader

    88
  • Signal Reveal Text

    Signal Reveal Text

    53
  • Toolchain Marquee

    Toolchain Marquee

    36
  • Ribbon Fold Loader

    Ribbon Fold Loader

    27
  • Mercury Rail Loader

    Mercury Rail Loader

    23
  • Tidal Type Text

    Tidal Type Text

    18
  • Facet Bloom Loader

    Facet Bloom Loader

    17