Share Link

beta

A link to share as a read-only field, with Copy that slips to Copied for a moment and back.

Preview

Anyone with the link can see it.

Link

Anyone outside your workspace who opens it can ask you for access.

Link

View only until Sat 3 Oct, midnight.

Link

View only until Sat 3 Oct, midnight. You can see who opened it.

Link

View only until Sat 3 Oct, midnight.

no label

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```

3. Add the component.

npx shadcn@latest add @txbrendan/share-link

The link in a share sheet, an invite, or a guest pass: people see it, select it, and copy it.
Say what the link lets people do, and until when, in hint: "View only until Sat 3 Oct, midnight. You can see who opened it."
Focusing the link selects it all. Copy puts exactly url on the clipboard, then says Copied for a moment.
If the page can't copy, the link is left selected and the field says so under it.
It keeps its size inside a Sheet. Pass size="lg" there if the sheet's other fields are large.

Sending the link. It only copies. Put Send or Share in the sheet's actions.
A link people should edit. Use Input.
A secret, like a password or an API key. Anyone who sees the screen can read the link.

url
Required. The link to share. Copy puts exactly this on the clipboard.
string
label
The small field label above, like "Link". It names the field.
ReactNode
hint
What the link lets people do, and until when. It describes the field.
ReactNode
onCopy
Runs after the link is copied.
(url: string) => void
size
Height, padding, and text size. The same heights as Input.
"sm" | "md" | "lg" · default "md"
id
The input's id, in place of its own. aria-* and data-* props land on the input too.
string
ref
Reaches the input.
Ref<HTMLInputElement>
className
Extra classes on the whole field. Later classes win.
string

Prop	Type	Default	What it does
url	string	-	Required. The link to share. Copy puts exactly this on the clipboard.
label	ReactNode	-	The small field label above, like "Link". It names the field.
hint	ReactNode	-	What the link lets people do, and until when. It describes the field.
onCopy	(url: string) => void	-	Runs after the link is copied.
size	"sm" \| "md" \| "lg"	"md"	Height, padding, and text size. The same heights as Input.
id	string	-	The input's id, in place of its own. aria-* and data-* props land on the input too.
ref	Ref<HTMLInputElement>	-	Reaches the input.
className	string	-	Extra classes on the whole field. Later classes win.

The link is a read-only text field named by label and described by hint. Give it a label, or an aria-label when there is none.
Copy is a button named "Copy link", then "Link copied". A polite live region says "Link copied" once.
If the copy fails, focus moves to the link, it is selected, and the note under the field says so, read once.
The icon is hidden from screen readers. The focus ring goes around the whole box while the link has focus.

<ShareLink
  label="Link"
  url="https://example.com/s/team/h8tq2m"
  hint="View only until Sat 3 Oct, midnight. You can see who opened it."
/>