engagement

Team Invite Template

Invite users to join a team or workspace

Preview

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";

type TeamInviteProps = {
  inviterName: string;
  teamName: string;
  inviteUrl: string;
};

export function TeamInviteEmail({
  inviterName,
  teamName,
  inviteUrl,
}: TeamInviteProps) {
  return (
    <Html>
      <Head />
      <Preview>{inviterName} invited you to join {teamName}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={iconContainer}>
            <span style={icon}>👥</span>
          </Section>
          <Heading style={h1}>You're invited!</Heading>
          <Text style={textCenter}>
            <strong>{inviterName}</strong> has invited you to join{" "}
            <strong>{teamName}</strong>.
          </Text>
          <Section style={buttonContainer}>
            <Button style={button} href={inviteUrl}>
              Accept Invite
            </Button>
          </Section>
          <Text style={muted}>This invite link will expire in 7 days.</Text>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#f6f9fc",
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "40px 20px",
  maxWidth: "480px",
};

const iconContainer = {
  textAlign: "center" as const,
  marginBottom: "24px",
};

const icon = {
  fontSize: "48px",
};

const h1 = {
  color: "#1f2937",
  fontSize: "24px",
  fontWeight: "600",
  textAlign: "center" as const,
  margin: "0 0 20px",
};

const textCenter = {
  color: "#374151",
  fontSize: "18px",
  lineHeight: "28px",
  textAlign: "center" as const,
  margin: "0 0 16px",
};

const muted = {
  color: "#6b7280",
  fontSize: "14px",
  lineHeight: "20px",
  textAlign: "center" as const,
};

const buttonContainer = {
  textAlign: "center" as const,
  margin: "32px 0",
};

const button = {
  backgroundColor: "#2563eb",
  borderRadius: "8px",
  color: "#fff",
  fontSize: "16px",
  fontWeight: "600",
  padding: "12px 24px",
  textDecoration: "none",
};

Install: npm install @react-email/components

Template Variables

Pass these props to your email component:

Variable	Description
`inviterName`	Name of person sending invite
`teamName`	Team or workspace name
`inviteUrl`	Unique invitation link

Best Practices

Social Proof

•Show inviter's name and photo if available
•Mention team size or notable members
•Brief description of what the team does

Onboarding Flow

•Allow sign-up and accept in one flow
•Pre-fill email address from invite
•Show team context after accepting

Security

•Set reasonable expiration (7 days typical)
•Limit invite to specific email address
•Allow team admins to revoke pending invites

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free