Share This Panel With Copy Link

Cta93: Share This Panel With Copy Link

A closing panel that asks the reader to forward the piece rather than subscribe, pairing a read-only link field and a copy button that confirms in place with a row of send destinations.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/cta93?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/cta93?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/cta93.tsx, the badge6 component used for the eyebrow, and the shadcn/ui input and button primitives behind the copy row.

Quick start

The installed file exports cta93Demo alongside the block: the exact props behind the preview above. Spread it to get a working share panel in one line.

import { Cta93, cta93Demo } from "@/components/beste/block/cta93";

export default function ArticlePage() {
  return <Cta93 {...cta93Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Cta93 } from "@/components/beste/block/cta93";

export default function ArticleFooter() {
  return (
    <Cta93
      eyebrow="Pass it on"
      heading="Know someone who should read this?"
      description="Nothing here is promoted anywhere."
      shareUrl="https://beste.co/letters/042"
      copyLabel="Copy link"
      copiedLabel="Copied"
      destinationsLabel="Or send it straight to"
      destinations={[
        { label: "Email", href: "mailto:?body=https://beste.co/letters/042" },
        { label: "Slack", href: "https://slack.com" },
      ]}
    />
  );
}

Props

type Destination = {
  label: string;
  href: string;
};

Behavior notes

• Copying uses navigator.clipboard?.writeText, guarded with optional chaining so an insecure context or an old browser does not throw. The field stays selectable either way, which is the fallback.
• The confirmation is in the button itself: the label switches to copiedLabel and the icon to a check, so nothing moves on the page.
• The copied state does not reset on a timer. It stays until the component remounts, which keeps the panel from flickering back while the reader is still looking at it.
• The field is readOnly rather than disabled, so it can still be focused, selected and read by assistive technology.
• Destinations are plain links, so each one can be a mailto:, an app URL or your own share route.