A document sharing dialog with email chips that validate as you type or paste, a permission picker, a people list with role changes and removal, and a general access switch whose lock turns into a globe.
npx shadcn@latest add https://hyperblur.dev/r/popup-share-access.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-share-access.tsx.
import { PopupShareAccess } from "@/components/hyperblur/popup-share-access"
<PopupShareAccess documentName="Roadmap" onInvite={(emails, role) => invite(emails, role)} />| Prop | Type | Default | Description |
|---|---|---|---|
| documentName | string | "Q4 Launch Plan" | Name in the heading. |
| link | string | A docs URL | Link copied by Copy link. |
| people | { email; name?; role: "view" | "comment" | "edit" | "owner"; pending? }[] | Owner and two collaborators | People who already have access. |
| defaultAccess | "restricted" | "link" | "restricted" | General access at first. |
| onInvite | (emails: string[], role: "view" | "comment" | "edit") => void | Called by Invite with the valid emails. | |
| onAccessChange | (access: "restricted" | "link") => void | Called when general access changes. | |
| onRoleChange | (email: string, role: "view" | "comment" | "edit" | "remove") => void | Called when a person's role changes or access is removed. | |
| onCopy | (link: string) => void | Called by Copy link, which also writes to the clipboard. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called on the close button, Escape, the backdrop and the main actions. | |
| showTrigger | boolean | true | Render the built-in trigger button. Turn it off when you open the popup from your own code. |
| triggerLabel | string | "Share" | Text of the built-in trigger button. |
| embedded | boolean | false | Render the panel in place instead of a fixed overlay: no backdrop, no scroll lock and no focus trap, for previews and docs. |
| accent | string | "#2f7bff" | Invite button and focus color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |