Invite Members

ProNew

An invite form that turns typed or pasted email addresses into chips, flags invalid or duplicate ones, sets a role and lists pending invitations.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/invite-members

Prop	Type	Default	Description
`roles`	`{ value: string; label: string }[]`	-	Roles people can be invited as.
`defaultRole`	`string`	first role	Role selected at first.
`onInvite`	`(invitations: { email: string; role: string }[]) => void \| Promise<void>`	-	Called with the valid invitations. Return a promise to show a sending state.
`pending`	`{ email: string; role: string; sent?: string }[]`	`[]`	Invitations sent but not yet accepted.
`onResend`	`(email: string) => void`	-	Adds a Resend button to each pending invitation.
`onRevoke`	`(email: string) => void`	-	Adds a Revoke button to each pending invitation.
`existing`	`string[]`	`[]`	Emails already in the workspace. They are flagged instead of invited.
`title`	`string`	`"Invite teammates"`	Heading.
`description`	`string`	-	Text under the heading.
`max`	`number`	`20`	Most addresses per batch.

Also accepts all <section> props.

Addresses are split on Enter, comma, space or semicolon. Pasting a list works.
Backspace in an empty input removes the last chip.
Problem chips show an icon and a screen reader explanation, not only a red outline.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/invite-members

Prop	Type	Default	Description
`roles`	`{ value: string; label: string }[]`	-	Roles people can be invited as.
`defaultRole`	`string`	first role	Role selected at first.
`onInvite`	`(invitations: { email: string; role: string }[]) => void \| Promise<void>`	-	Called with the valid invitations. Return a promise to show a sending state.
`pending`	`{ email: string; role: string; sent?: string }[]`	`[]`	Invitations sent but not yet accepted.
`onResend`	`(email: string) => void`	-	Adds a Resend button to each pending invitation.
`onRevoke`	`(email: string) => void`	-	Adds a Revoke button to each pending invitation.
`existing`	`string[]`	`[]`	Emails already in the workspace. They are flagged instead of invited.
`title`	`string`	`"Invite teammates"`	Heading.
`description`	`string`	-	Text under the heading.
`max`	`number`	`20`	Most addresses per batch.

Also accepts all <section> props.

Addresses are split on Enter, comma, space or semicolon. Pasting a list works.
Backspace in an empty input removes the last chip.
Problem chips show an icon and a screen reader explanation, not only a red outline.