SharePanel
StableWho can open a chat or a result, with its link to copy and a way to stop sharing.
Also known as share dialog, share link, share settings
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Share a chat
Share
Lisbon trip plan
The link shows this chat up to now. Messages you send later are not shared.
<SharePanel
title="Lisbon trip plan"
access={access}
onAccessChange={setAccess}
link="https://example.com/share/7KQ4M9XP"
onStopSharing={stopSharing}
/>Change who can open it, copy the link, or stop sharing.
When to use it
Makes sharing a chat or result a clear choice about who can see it, so nothing is shared more widely than meant.
Made of: Heading and item title · Who can open it · Link and Copy link · What the link shows · Stop sharing
Use it for
- Sharing a chat, an artifact or a report as a link.
- Changing or stopping sharing later.
Not for
- Inviting people to work on something together: use Dialog.
- Exporting a file: use ExportSheet.
- Asking before an action the AI takes: use PermissionPrompt.
Do and avoid
Share
Lisbon trip plan
The link shows this chat up to now. Messages you send later are not shared.
Share
Lisbon trip plan
Anyone can view.
Do
- Start from Only you.
- Say what the link shows and what it does not.
- Make stopping as easy as sharing.
Avoid
- Do not make Anyone with the link the default.
- Do not hide that later messages are not shared, or are.
- Do not stop sharing without one question.
On a phone
- The link and Copy link stack on a narrow screen, with the button full width.
- Each choice has its own line of explanation, so nothing is cut off.
Seen in products
- Claude lets people choose a project's visibility in their organization and share chats on purpose; chats stay private unless shared.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | none | What is being shared, such as the chat's title. |
| accessrequired | "private" | "workspace" | "link" | none | Who can open it now. |
| onAccessChangerequired | (access) => void | none | Called when the person picks who can open it. |
| link | string | none | The link, once there is one. |
| onCopy | (link: string) => void | none | Copies the link. Defaults to the clipboard. |
| onStopSharing | () => void | none | Turns the link off. Asks once first. |
| showWorkspace | boolean | true | Offer the workspace choice. |
| labels | SharePanelLabels | none | Overrides heading, access, options, link, copy, copied, scope, stop, stopQuestion and keep. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 2 | Level of the part's heading. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one SharePanel switches all of this from its properties panel, across 6 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Access | access | Private, Workspace, Link |
| Show workspace | showWorkspace | On or off |
| Title | title | Any text |
| Link | link | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- only you
- No link is shown.
- workspace
- The link, Copy link, and a line saying what the link shows.
- anyone with the link
- The same, and the choice itself warns about private details.
- copied
- Copy link says Copied with a check for a moment, and the same word is read out.
- asking to stop
- Stop sharing becomes a question in place, with Stop sharing and Keep sharing.
Tokens
Change one of these and every part that uses it follows.
--surface-sunken--line--fg-muted--danger--radius-field
Built in
- The choices are a radio group with a legend; arrow keys move between them.
- The link field selects itself on focus, and Copy link says Copied, also read out.
- Stop sharing asks in place and moves focus to the safe choice.
What you need to do
- Put it in a Dialog or a Sheet with a clear title, and set headingLevel to fit (2 by default).
- Say exactly what the link shows in the scope line.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide