Use Clipboard

Component 1

About

A React hook that copies text to the clipboard and tracks a temporary copied state for showing feedback.

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

Code

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

Usage.tsx

"use client";

import { useClipboard } from "@/components/ui/use-clipboard";

export default function UseClipboardDemo() {
  const { copy, copied } = useClipboard();

  return (
    <div className="flex min-h-52 items-center justify-center">
      <button
        type="button"
        onClick={() => copy("https://intentui.com")}
        className="inline-flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
      >
        {copied ? "Copied!" : "Copy link"}
      </button>
    </div>
  );
}