Invite Members Modal React component
An invite dialog that handles the real cases: paste a list and it becomes chips, bad addresses turn red, existing members and pending invites are caught, each person gets a role, a seat meter warns before you go over the plan, an optional message, a shareable invite link with expiry and reset, and a success list.
About the Invite Members Modal component
Invite Members Modal is the dialog teams use to bring people in. Paste a whole list of addresses and they turn into chips, each with its own role, ready to send.
It catches the mistakes that usually slip through: typos are marked in red, people who are already members or already invited are skipped with a note, and a seat meter shows when the invites would go over the plan. A shareable invite link with an expiry covers everyone else.
When to use it
Use it in team and workspace settings, project sharing and onboarding steps that ask people to invite colleagues.
For sharing a single document with view or edit rights, use Share Settings Modal.
Installation
Add the Invite Members Modal component to your project with the shadcn CLI. It lands in components/invite-members-modal.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/invite-members-modalOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<InviteMembersModal /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| workspace | string | "Nexora" |
| members | string[] | MEMBERS |
| seats | { used: number; total: number } | { used: 6, total: 10 } |
| defaultOpen | boolean | true |
| onInvite | (invites: Invite[], message: string) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- workspacestringDefault: "Nexora"
- membersstring[]Default: MEMBERS
- seats{ used: number; total: number }Default: { used: 6, total: 10 }
- defaultOpenbooleanDefault: true
- onInvite(invites: Invite[], message: string) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Invite Members Modal FAQ
- How do I send the invites?
- onInvite receives the list of { email, role } and the optional message. Return a Promise to keep the Sending state until your API answers; the invites then appear as pending.
- What counts as a duplicate?
- Any address already in members, already pending or already in the field. Those are skipped and a short notice says why.
- How does the seat limit work?
- The meter adds current members, pending invites and the new valid invites. If that's more than the plan's seats, sending is blocked and an Add seats link appears.
- Is the invite link secure?
- The demo just shows the pattern. Generate links on your server, store the expiry, give link joiners the lowest role, and make Reset link revoke the old token.
- Is it accessible?
- It's a modal dialog with a title, Escape and a close button; chips have labelled role selects and remove buttons; notices and validation messages are announced; and the invite link toggle is a switch.
