Skip to content
Launch offerSolo $19 $49 · Team $39 $79Launch pricing ends Sunday
Mailblocks
LibraryGet it →

Team invite email

Workspace invitation with inviter, role and team preview — the email that drives viral growth.

Free — get the code ↓
14.4 KB · Gmail-safe

Code

import * as React from "react";
import { Avatar, Btn, Column, Eyebrow, Fallback, H1, P, Panel, Row, Shell, Small, Strong, nameOf, type TemplateProps } from "../components";

export type TeamInviteProps = TemplateProps & {
  inviterName?: string;
  inviterEmail?: string;
  workspace?: string;
  role?: string;
  members?: string[];
  inviteUrl?: string;
  expiresInDays?: number;
};

export default function TeamInvite({
  style,
  brand,
  inviterName = "Daniel Okafor",
  inviterEmail = "daniel@northbeam.co",
  workspace = "Northbeam",
  role = "Editor",
  members = ["Priya Raman", "Tom Lindqvist", "Ana Sousa", "Jules Martin"],
  inviteUrl = "https://fieldnote.app/invite/accept?token=5be91d",
  expiresInDays = 7,
}: TeamInviteProps) {
  const palette = ["#3B5BFD", "#FF7A45", "#16A34A", "#9333EA", "#0EA5E9"];
  return (
    <Shell style={style} brand={brand} label="Invitation" preview={`${inviterName} invited you to join ${workspace} as ${role}.`}>
      <Eyebrow>You're invited</Eyebrow>
      <H1>Join {workspace} on {nameOf(brand)}</H1>
      <P>
        <Strong>{inviterName}</Strong> ({inviterEmail}) invited you to collaborate in the <Strong>{workspace}</Strong>{" "}
        workspace as {role === "Admin" ? "an" : "a"} <Strong>{role}</Strong>.
      </P>
      <Panel pad={16}>
        <Row>
          {members.slice(0, 4).map((m, i) => (
            <Column key={m} style={{ width: "44px" }}>
              <Avatar name={m} size={36} color={palette[i % palette.length]} />
            </Column>
          ))}
          <Column style={{ paddingLeft: "6px" }}>
            <Small mb={0}>
              {members.slice(0, 2).join(", ")} and {members.length - 2} others are already here.
            </Small>
          </Column>
        </Row>
      </Panel>
      <Btn href={inviteUrl}>Accept invitation</Btn>
      <Small>This invitation expires in {expiresInDays} days.</Small>
      <Fallback href={inviteUrl} />
      <Small mb={0}>Not expecting this? You can ignore the email — you won't be added unless you accept.</Small>
    </Shell>
  );
}

TeamInvite.PreviewProps = {} satisfies TeamInviteProps;

The TSX imports components.tsx and theme.ts from the kit. Grab the free starter (all six free templates with their components) on the free page.

Related

← Export readyMention →
Mention email template preview

Mention

№28 · Team

Comment notification with the quoted message, context and a reply button.

Role changed email template preview

Role changed

№29 · Team

Permission change notice listing what the user can now do (or no longer do).

Access request email template preview

Access request

№30 · Team

Admin email to approve or decline a join request in one click.

Welcome email template previewFree

Welcome

№01 · Onboarding

A founder-signed welcome with one primary action and a three-step activation checklist.