Share dialog

A React component in Beamline's Overlays category.

Share a document, board or project: invite people by name or email with the access they get, change or remove anyone's access in place, and set who the link opens for, with Copy link; inviting turns the dialog into the invitation (role, notify, a note) and back.

Use it for

Sharing one thing (a document, a dashboard, a project, a report) with people and deciding what each may do.
The share panel inside a popover or a sheet beside the thing being shared (SharePanel).

Not for

Managing every member and seat of a workspace (settings, data-grid).
A single link to copy (copy-button).
Sending a message (chat-thread, comment-thread).

Anatomy

ShareDialog: the system Dialog (title “Share ‘…’”, its trigger) around a SharePanel; the dialog eases to each step's height
invite field: people already chosen as chips, typing finds people in your directory (name, email, team) or takes any valid email; Backspace takes back the last chip
people with access: avatar, name (and You), email, a Pending tag for invitations not yet accepted, and the access each has as a menu (roles, then Remove access); the owner's row says Owner and has no menu
a removal leaves a line in the person's place, “… no longer has access · Undo”, for a few seconds
general access: an icon that turns with the setting (lock, building, globe), who the link opens for, and what they may do
footer: Copy link, and Done
invite step: the chips, the role they get, Notify people, a note, and Cancel / Send invite; a refusal says why and keeps the draft

Variants

linkAccess: restricted, organization, anyone

States

list (people with access, general access)
inviting (chips chosen: role, notify, note)
sending (Send shows progress; the field and choices hold)
sent (the new people grow into the list as Pending, and a line says who was invited)
refused (the reason under the field; the draft stays)
changing a role (the menu's choice applies at once; a refusal puts it back and says why on the row)
removed (an Undo line in the person's place)
outside the organisation (an email from another domain is marked Outside and said in words)
read-only (canManage false: every access is shown, nothing can be changed)

Keyboard

Focus starts in the invite field; ↑/↓ move through matches, Enter or Tab adds the active person, Enter on a typed email adds it, comma adds it too
Backspace in an empty field selects the last chip, a second Backspace removes it
Tab reaches each person's access menu (↑/↓ inside, Enter chooses) and the general access controls
Escape closes the match list first, then the dialog; in the invite step Escape goes back to the list step
Enter in the note does not send; ⌘/Ctrl+Enter sends

Motion

The dialog opens out of its trigger and eases to the invite step's height and back (Dialog step). Chosen people grow in as chips; the match list opens out of the field with a plate gliding between rows. Invited people grow into the list and the rest slide down (useFlip); a removed person's row gives way to its Undo line in place. The general access icon turns into its next shape (lock → building → globe) as the setting changes. Reduced motion keeps the fades and places everything at once.

Props

Prop	Type	Default	Description
`title`	`ReactNode`	—	ShareDialog: the thing being shared, as the dialog's title (“Share ‘Q3 renewal plan’”).
`trigger`	`ReactElement`	—	ShareDialog: what opens it (a Share button).
`open / defaultOpen / onOpenChange`	`boolean`	—
`people` (required)	`ShareMember[]`	—	{ id, name, email, src?, role, owner?, you?, pending? }.
`directory`	`SharePerson[]`	—	People who can be found by typing: { id, name, email, src?, team? }.
`roles`	`{ value, label, description? }[]`	—	Default Can view, Can comment, Can edit.
`defaultRole`	`string`	—	The role new invitees get. Default the first role that is not the most powerful (Can comment), else the first.
`organization`	`{ name: string; domain: string }`	—	Names the organisation option of the link and marks invitees from other domains as Outside.
`onInvite`	`(invite: { people: SharePerson[]; role: string; notify: boolean; message: string }) => void \| Promise`	—	A promise shows progress; a rejection keeps the draft and shows its message.
`onRoleChange`	`(member: ShareMember, role: string) => void \| Promise`	—	A rejection puts the old role back and says why on the row.
`onRemove`	`(member: ShareMember) => void \| Promise`	—
`onRestore`	`(member: ShareMember) => void`	—	Offers Undo after a removal.
`link`	`string`	—	The address Copy link copies; without it the general access section is left out.
`linkAccess / defaultLinkAccess / onLinkAccessChange`	`"restricted" \| "organization" \| "anyone"`	—
`linkRole / defaultLinkRole / onLinkRoleChange`	`string`	—	What people who open the link may do.
`canManage`	`boolean`	—	False shows who has access without any controls. Default true.
`className / classNames / style / ref`	`SharePanel root`	—

Built from

dialog
avatar
badge
button
dropdown-menu
select
checkbox
textarea
copy-button

Dependencies

@radix-ui/react-dialog, @radix-ui/react-popover, lucide-react

Import

import { SharePanel, ShareDialog, SHARE_ROLES } from "@/components/share-dialog/share-dialog";

Get it

Share dialog is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent