Share Dialog React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Pro item: the CLI needs a Pro account. See plans

Usage

Import ShareDialog from @/components/blocks/share-dialog.

"use client"

import { ShareDialog } from "@/components/blocks/share-dialog"
import type { ShareDialogPerson } from "@/components/blocks/share-dialog-data"

export function ShareDoc({ docId, people }: { docId: string; people: ShareDialogPerson[] }) {
  return (
    <ShareDialog
      resourceName="Q4 Launch Plan"
      link={`https://docs.acme.com/d/${docId}`}
      defaultPeople={people}
      onInvite={async (emails, role, message) => {
        const res = await fetch(`/api/docs/${docId}/invites`, { method: "POST", body: JSON.stringify({ emails, role, message }) })
        if (!res.ok) throw new Error("The invites were not sent. Try again.")
      }}
      onRoleChange={(personId, role) =>
        fetch(`/api/docs/${docId}/members/${personId}`, { method: "PATCH", body: JSON.stringify({ role }) })
      }
      onRemove={(personId) => fetch(`/api/docs/${docId}/members/${personId}`, { method: "DELETE" })}
      onAccessChange={(access) => fetch(`/api/docs/${docId}`, { method: "PATCH", body: JSON.stringify({ access }) })}
    />
  )
}

Props

• resourceNamedefault "Q4 Launch Plan"
  string

  The file, doc or project being shared; it fills the title (Share "Q4 Launch Plan") and the remove confirmation.

• title
  ReactNode | ((name: string) => ReactNode)

  The dialog title, or a function of resourceName. Default Share "name" from labels.title.

• descriptiondefault ""
  ReactNode

  A line under the title, e.g. who can see the file today.

• people
  ShareDialogPerson[]

  Controlled list of people with access: { id, name, email, avatar?, role, owner?, pending? }. Pair it with onPeopleChange, which fires after invites, role changes, removals and a new owner.

• defaultPeopledefault "SHARE_DIALOG_PEOPLE"
  ShareDialogPerson[]

  Starting list while uncontrolled; the sample is an owner, an editor, a commenter and a pending invite.

• onPeopleChange
  (people: ShareDialogPerson[]) => void

  The list after every change the dialog makes.

• rolesdefault "DEFAULT_SHARE_DIALOG_ROLES"
  ShareDialogRole[]

  The role options { value, label, description? } for invites, rows and the link. Default Viewer, Commenter and Editor.

• suggestionsdefault "[]"
  ShareDialogPerson[]

  People the email field suggests while typing (name, address and photo); invited ones keep their name and photo in the list.

• linkdefault "https://docs.acme.com/d/q4-launch-plan"
  string

  The address Copy link puts on the clipboard.

• domaindefault "acme.com"
  string

  The organization domain for the "Anyone at acme.com" access option. Empty hides that option.

• labels
  Partial<ShareDialogLabels>

  Merged over DEFAULT_SHARE_DIALOG_LABELS. Every string: the trigger, title, placeholder, roles, toasts, confirmations, access options and buttons. Functions take the name or count.

• trigger
  ReactNode

  The element that opens the dialog, rendered with asChild. Default a soft Share button; null renders none, for a dialog driven by open.

• defaultInviteRoledefault "viewer"
  string

  The role preselected for new invites.

• defaultAccessdefault "restricted"
  "restricted" | "domain" | "anyone"

  Starting general access while uncontrolled: only people with access, anyone at the domain, or anyone with the link.

• access
  "restricted" | "domain" | "anyone"

  Controlled general access; pair it with onAccessChange.

• onAccessChange
  (access: ShareDialogAccess) => void

  A new general access was picked.

• defaultLinkRoledefault "viewer"
  string

  Starting role for people who open the link, shown while access is not restricted.

• linkRole
  string

  Controlled link role; pair it with onLinkRoleChange.

• onLinkRoleChange
  (role: string) => void

  A new link role was picked.

• onInvite
  (emails: string[], role: string, message?: string) => void | Promise<unknown>

  Invite was pressed with valid, new addresses. Return a promise to show the loading state; a rejection keeps the chips and shows its message under the field.

• onRoleChange
  (personId: string, role: string) => void | Promise<unknown>

  A row's role changed. It updates at once; a rejection puts the old role back with an error toast.

• onRemove
  (personId: string) => void | Promise<unknown>

  Remove access was confirmed. A rejection shows in the confirmation and keeps the row.

• onTransferOwnership
  (personId: string) => void | Promise<unknown>

  Adds Make owner to each row's menu; after the confirmation that person becomes the owner and the old owner an editor.

• onResend
  (personId: string) => void | Promise<unknown>

  Resend on a pending invite.

• showMessagedefault true
  boolean

  A message field slides in under the invite row once there are addresses.

• readOnlydefault false
  boolean

  For viewers: no invite row, roles and access as plain text, no row menus. Copy link still works.

• defaultOpendefault false
  boolean

  Opens on mount while uncontrolled.

• open
  boolean

  Controlled open state; pair it with onOpenChange. The dialog stays open while an invite is sending.

• onOpenChange
  (open: boolean) => void

  Done, the close button, Escape, an outside click or the sheet drag.

• sizedefault "md"
  "md" | "lg"

  Dialog width: md 520px, lg 720px. Below 768px it is a bottom sheet either way.

• responsivedefault true
  boolean

  A bottom sheet below 768px, with the role pickers and row menus as sheets too.

• className
  string

  Classes for the dialog content. Other props go to the dialog content too (onOpenAutoFocus, aria-*).

• classNames
  Partial<Record<ShareDialogSlot, string>>

  Classes for overlay, content, header, body, footer, invite, people, person, access, copy and done.

Parts

FAQ

More React overlay components