shadcn.io is an independent project built on shadcn/ui
Invite Team opens Invite team members. Three email fields use colleague, teammate, and partner placeholders. Send Invitations sits above a divider that reads Or share link, then a read-only invite URL and Copy.
Use it to invite people without opening settings. Copy does not write to the clipboard until you add that. A role beside each email fits a Select. In Svelte, Ark UI does not send the invites.
Installation
Anatomy
Usage
<Dialog><DialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Invite Team</Button>{/snippet}</DialogTrigger><DialogContent class="sm:max-w-lg"><DialogHeader><DialogTitle>Invite team members</DialogTitle><DialogDescription>Invite your team members to collaborate on this project.</DialogDescription></DialogHeader><FieldGroup>{#each invitees as invitee (invitee.name)}<Field><FieldLabel>Email address</FieldLabel><Input name={invitee.name} placeholder={invitee.placeholder} type="email" /></Field>{/each}<Button class="w-full">Send Invitations</Button><FieldSeparator>Or share link</FieldSeparator><Field><FieldLabel class="sr-only">Invite link</FieldLabel><div class="flex items-center gap-2"><Input class="flex-1" readonly type="text" value={inviteLink} /><Button size="sm" variant="outline">Copy</Button></div><FieldDescription>Anyone with this link can join your team</FieldDescription></Field></FieldGroup></DialogContent></Dialog>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.
API Reference
Dialog
No extra props in this demo. The rest is on the Dialog page.
Button
Sets props, variant="outline" and size="sm". The rest is on the Button page.
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets name={invitee.name}, placeholder={invitee.placeholder}, type="email", readonly, type="text" and value={inviteLink}. The rest is on the Input page.
