Share Dialog

Manage who can open a workspace, publish it and export it, with link access, invites, roles and permission switches.

Change the link access, invite someone by email, change a role, or try Publish and Export.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/share-dialog.json

Features

Three tabs. Share, Publish and Export, each with its own footer action.
Direct link. A menu sets whether the link can view or edit, the line under it says so, and Copy link swaps to Copied. "How does link sharing work?" opens a short explainer you can replace.
Invite by email. The field suggests people by name or address as you type. Press Enter to add someone as a viewer. Anything that is not an email address, or someone who already has access, is turned away with a shake.
Roles. Each person has a menu to make them an editor or a viewer, or remove their access. Removing someone can be undone from the toast. The owner cannot be changed.
Permission switches. Show on my profile, let members invite others, and let visitors export or duplicate data.
Publish. Pick private, team or public, edit the address, and choose whether search engines can list it. Schedule opens a calendar.
Export. Pick PDF, CSV or Markdown and whether to include comments.
Grouped with muted Cards. The section panels are the Card muted variant, so nothing is hand styled.

Usage

import { ShareDialog } from "@/components/blocks/share-dialog"
import { Button } from "@/components/ui/button"
 
<ShareDialog
  noun="workspace"
  url="https://acme.app/w/launch-plan"
  members={members}
  people={teammates}
  trigger={<Button>Share</Button>}
  onChange={({ members, settings }) => save({ members, settings })}
  onInvite={(emails) => sendInvites(emails)}
  onPublish={({ visibility, slug, indexable }) => publish({ visibility, slug, indexable })}
  onExport={({ format, comments }) => download(format, comments)}
/>

Use SharePanel for the same content on a page or inside your own card, without the dialog.

Props

noun. What is being shared, as in "Share this workspace".
url. The direct link. Its last part is the address on the Publish tab.
members. People with access: name, email, avatar and role, which is owner, editor or viewer.
people. Suggested in the invite field.
settings. The link access and the three switches.
onChange. Runs with the members and settings on every change.
onInvite, onPublish, onSchedule, onExport. Run from the matching actions. Publish and Export show a spinner while they run.
help. What "How does link sharing work?" shows.
open, defaultOpen, onOpenChange, trigger. The dialog, on ShareDialog only.

Email Composer motion

On This Page

Installation Features Usage Props

Share Dialog

Share this workspace

Direct link

Share Dialog

Share this workspace

Direct link