Copy to clipboard

Buttons 2

About

Copy to Clipboard Component

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

Code

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

Usage.tsx

"use client"

import { CopyToClipboard } from "@/components/ui/copy-to-clipboard";

export function CopyToClipboardDemo() {
  const codeExample = `const Button = ({ children, className }) => {
  return (
    <button 
      className={cn(
        "px-4 py-2 rounded bg-blue-500",
        className
      )}
    >
      {children}
    </button>
  )
}`

  return (
    <div className="relative p-8 rounded-lg bg-neutral-50 dark:bg-neutral-950 font-mono text-sm">
      <CopyToClipboard>
        {codeExample}
      </CopyToClipboard>
      <pre>
        <code>
          {codeExample}
        </code>
      </pre>
    </div>
  )
}