# Share dialog

A React component in [Beamline](https://beamline.io/)'s [Overlays](https://beamline.io/components/overlays) category. Live demo: https://beamline.io/components/share-dialog

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](https://beamline.io/components/data-grid)).
- A single link to copy ([copy-button](https://beamline.io/components/copy-button)).
- Sending a message ([chat-thread](https://beamline.io/components/chat-thread), [comment-thread](https://beamline.io/components/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](https://beamline.io/components/dropdown-menu)
- select
- checkbox
- textarea
- [copy-button](https://beamline.io/components/copy-button)

## Dependencies

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

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Overlays

- [Command menu](https://beamline.io/components/command-menu): Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
- [Toast](https://beamline.io/components/toast): Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
- [Context menu](https://beamline.io/components/context-menu): Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- [Hover card](https://beamline.io/components/hover-card): A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- [Product tour](https://beamline.io/components/product-tour): A short guided tour over the real interface: a spotlight that glides from one element to the next while the rest of the screen dims, and a card beside…
- [Bottom sheet](https://beamline.io/components/bottom-sheet): A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
- [Sheet](https://beamline.io/components/sheet): A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- [Dropdown menu](https://beamline.io/components/dropdown-menu): A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
- [Dialog](https://beamline.io/components/dialog): A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- [Alert Dialog](https://beamline.io/components/alert-dialog): A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
- [Popover](https://beamline.io/components/popover): A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
- [Tooltip](https://beamline.io/components/tooltip): Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.