shadcn.io is not affiliated with official shadcn/ui
Dialog examples · Standard
Invite Team Members Dialog for React
A team invitation dialog with three email fields, a send button and a shareable invite link.
Inviting teammates shouldn't need a trip to settings. This React dialog takes up to three email addresses or hands out a link anyone can join with. It's shadcn.io's Dialog on Base UI with Input and Field parts, and a FieldSeparator between the two ways in.
Preview
Installation
FAQ
How do I validate the emails?
Validate each field when it loses focus and show a FieldError under the invalid ones. Empty fields are fine; disable Send Invitations until at least one address is valid.
Should invite links expire?
Yes, after a week or so, and let admins regenerate them. Say when the link expires in its FieldDescription.
How do I make Copy work?
Copy the link to the clipboard on click and confirm with a toast or a brief Copied label. The Clipboard component does this with a built-in indicator.
Can I pick a role for each invitee?
Yes: add a Select beside each email, or one default role for the whole batch.
Related
- Newsletter DialogA newsletter dialog with one email field
- Standard DialogA share dialog with a read-only link, a
- Input with LabelA text input with a label above it
- Button with Text (Standard)The one filled action
- Signup Form DialogA sign-up dialog with name, email and
- Card Details DialogA payment card dialog with cardholder