# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/cta93. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [CTA](/blocks/cta)
5. /
6. Share This Panel With Copy Link

# Share This Panel With Copy Link[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/cta93`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop              | Type            | Default | Description                               |
| ----------------- | --------------- | ------- | ----------------------------------------- |
| eyebrow           | string          | –       | Badge6 label inside the panel             |
| heading           | string          | –       | Panel heading                             |
| description       | string          | –       | Supporting paragraph                      |
| shareUrl          | string          | –       | The address shown in the field and copied |
| copyLabel         | string          | –       | Button label before copying               |
| copiedLabel       | string          | –       | Button label after copying                |
| destinationsLabel | string          | –       | Words before the destination chips        |
| destinations      | Destination\[\] | \[\]    | Places to send it, as links               |
| className         | string          | –       | Extra classes for the outer section       |

tsCopy

```
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.

## More CTA blocks

[View all CTA](/blocks/cta)

[](/block/cta73)

PRO

cta73

### Closing CTA Panel

A closing call to action on a soft panel, pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live agenda micro-asset.

[](/block/cta75)

PRO

cta75

### Split CTA With Thread

A split call to action pairing an eyebrow, light heading, paragraph, and two accent buttons with an image tile that floats a live team message thread.

[](/block/cta84)

PRO

cta84

### Photo Band Story CTA

A closing call to action set on a photographic panel with a directional gradient, pairing an eyebrow badge, light heading, and two actions with a live customer quote card.

[](/block/cta87)

PRO

cta87

### Resource Rows CTA

A closing call to action that offers three downloadable resources as full-width hairline rows, each a link with a short kicker, a format note, and an arrow that shifts on hover.

[](/block/cta91)

PRO

cta91

### Handheld Reminder CTA

A closing call to action that leads with a narrow portrait tile floating a live phone frame, then sets centered copy and two actions beneath it over three hairline promises.

[](/block/cta81)

PRO

cta81

### Launch Countdown CTA

A closing call to action with centered copy above two image tiles, one floating a live countdown and the other an inline email capture, closing on a line of fine print.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.