Invite members

The members-settings invite flow: emails become chips that pop in, one role applies to all, Send morphs into a sent count, a join link copies with a check, and pending invites can be resent or slide out when revoked.

TypeScript Source with Startup & Business plans Light & dark

Invite members

Paste emails separated by commas. Everyone gets the same role.

Invite as

Or share a join linkacme.app/join/k7F2-q9Lm

Pending invites

Mmara@northwind.devAdminsent 2 days ago
Jjules@northwind.devMembersent 5 days ago

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { InviteMembers } from '@/components/component-kit/items/block-invite-members';
2
3export function Example() {
4  return <InviteMembers onInvite={(emails, role) => console.log(emails, role)} />;
5}

Props

Invite members properties
Prop	Type	Default	Description
`invitations`	`Invitation[]`	`2 demo invites`	Pending invitations to show; each has id, email, role and sentAt.
`defaultRole`	`"admin" \| "member" \| "readonly"`	`"member"`	The role preselected for new invites.
`onInvite`	`(emails: string[], role: MemberRole) => void`	`undefined`	Called with every address when Send is pressed.
`onRevoke`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is revoked.
`onResend`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is resent.
`contentClassName`	`string`	`undefined`	Class for the portalled role menu.
`hidePending`	`boolean`	`false`	Render only the composer, without the join link or pending list.
`inviteLink`	`string`	`"acme.app/join/k7F2-q9Lm"`	Shareable join link with a copy button that morphs into a check.
`autoPlay`	`boolean`	`false`	Pop demo addresses into the field and send them on a loop, for inert previews.

1import { InviteMembers } from '@/components/component-kit/items/block-invite-members'; 2 3export function Example() { 4 return <InviteMembers onInvite={(emails, role) => console.log(emails, role)} />; 5}

Props

Invite members properties
Prop	Type	Default	Description
`invitations`	`Invitation[]`	`2 demo invites`	Pending invitations to show; each has id, email, role and sentAt.
`defaultRole`	`"admin" \| "member" \| "readonly"`	`"member"`	The role preselected for new invites.
`onInvite`	`(emails: string[], role: MemberRole) => void`	`undefined`	Called with every address when Send is pressed.
`onRevoke`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is revoked.
`onResend`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is resent.
`contentClassName`	`string`	`undefined`	Class for the portalled role menu.
`hidePending`	`boolean`	`false`	Render only the composer, without the join link or pending list.
`inviteLink`	`string`	`"acme.app/join/k7F2-q9Lm"`	Shareable join link with a copy button that morphs into a check.
`autoPlay`	`boolean`	`false`	Pop demo addresses into the field and send them on a loop, for inert previews.

Props

Invite members properties
Prop	Type	Default	Description
`invitations`	`Invitation[]`	`2 demo invites`	Pending invitations to show; each has id, email, role and sentAt.
`defaultRole`	`"admin" \| "member" \| "readonly"`	`"member"`	The role preselected for new invites.
`onInvite`	`(emails: string[], role: MemberRole) => void`	`undefined`	Called with every address when Send is pressed.
`onRevoke`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is revoked.
`onResend`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is resent.
`contentClassName`	`string`	`undefined`	Class for the portalled role menu.
`hidePending`	`boolean`	`false`	Render only the composer, without the join link or pending list.
`inviteLink`	`string`	`"acme.app/join/k7F2-q9Lm"`	Shareable join link with a copy button that morphs into a check.
`autoPlay`	`boolean`	`false`	Pop demo addresses into the field and send them on a loop, for inert previews.

Invite members

TypeScript Source with Startup & Business plans Light & dark

Invite members

Paste emails separated by commas. Everyone gets the same role.

Invite as

Or share a join linkacme.app/join/k7F2-q9Lm

Pending invites

Mmara@northwind.devAdminsent 2 days ago
Jjules@northwind.devMembersent 5 days ago

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { InviteMembers } from '@/components/component-kit/items/block-invite-members';
2
3export function Example() {
4  return <InviteMembers onInvite={(emails, role) => console.log(emails, role)} />;
5}

Props

Invite members properties
Prop	Type	Default	Description
`invitations`	`Invitation[]`	`2 demo invites`	Pending invitations to show; each has id, email, role and sentAt.
`defaultRole`	`"admin" \| "member" \| "readonly"`	`"member"`	The role preselected for new invites.
`onInvite`	`(emails: string[], role: MemberRole) => void`	`undefined`	Called with every address when Send is pressed.
`onRevoke`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is revoked.
`onResend`	`(invitation: Invitation) => void`	`undefined`	Called when a pending invite is resent.
`contentClassName`	`string`	`undefined`	Class for the portalled role menu.
`hidePending`	`boolean`	`false`	Render only the composer, without the join link or pending list.
`inviteLink`	`string`	`"acme.app/join/k7F2-q9Lm"`	Shareable join link with a copy button that morphs into a check.
`autoPlay`	`boolean`	`false`	Pop demo addresses into the field and send them on a loop, for inert previews.