A Share button whose panel copies the link, sets access, and sends to people or channels.
pnpm dlx shadcn@latest add @latheui/share-panelPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Share Panel is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| title* (required) | string | — | Name of the thing being shared, used in the panel's heading. |
| link* (required) | string | — | The link Copy writes to the clipboard. |
| access* (required) | { value: string; label: string; description?: string }[] | — | Who can open the link. |
| defaultAccess | string | first option | Access level selected first. |
| people | { id: string; name: string; avatar?: string }[] | [] | Recent collaborators. Initials are shown without an avatar. |
| channels | { id: string; label: string; icon?: ReactNode }[] | [] | Other places to post the link. |
| onSend | ({ people, access }) => void | Promise<void> | — | Sends to the chosen people. A pending promise shows progress; a rejection shows its message. |
| onChannel | (id: string, access: string) => void | Promise<void> | — | Posts to a channel, with progress on that button. |
| onCopy | (access: string) => void | — | Called after the link is copied. |
| label | string | "Share" | Text of the trigger button. |
| align | "start" | "center" | "end" | "end" | Edge of the button the panel lines up with. |
| className | string | — | Classes for the trigger button. |
Leave out people and channels for a compact copy-and-access panel.
<SharePanel
title="Design review"
link={url}
label="Copy link"
access={[{ value: "link", label: "Anyone with the link" }]}
/>