Free React Email Team Invite Template

import * as React from 'react';

import {
  Band,
  BodyText,
  Brand,
  colors,
  CTAButton,
  Display,
  EmailLayout,
  Kicker,
  Lead,
  Note,
  Stat,
  StatRow,
} from './components';

export interface TeamInviteEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  /** What they are joining, in numbers. */
  stats?: Stat[];
  /** The inviter's own words. */
  quote?: React.ReactNode;
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Team invite — the workspace sold in three numbers, with the inviter's note
 * kept verbatim because that is the part that gets it accepted.
 */
export function TeamInviteEmail({
  brand,
  subject = 'Maya invited you to the Northwind workspace',
  preview = 'You’ve got a seat on Northwind’s Sonar workspace — 14 dashboards inside.',
  label = 'Invitation',
  kicker = 'You’ve been invited',
  headline = (
    <>
      MAYA WANTS
      <br />
      YOU IN THE
      <br />
      DASHBOARD.
    </>
  ),
  lead = (
    <>
      Maya Okonjo (Head of Growth) added you to <strong>Northwind</strong> on
      Sonar as an <strong>Editor</strong>.
    </>
  ),
  stats = [
    { value: '14', label: 'dashboards' },
    { value: '9', label: 'teammates' },
    { value: '2.1M', label: 'events / mo' },
  ],
  quote = '“Starting with the Activation funnel — I want your read on the step-3 drop before Thursday.” — Maya',
  cta = {
    label: 'Accept invitation',
    href: 'https://sonar.example.com/invite/9kd21',
  },
  note = 'This invite expires in 7 days. You’ll join with an Editor seat; billing stays on Northwind’s plan.',
}: TeamInviteEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="lime"
    >
      <Band tone="lime" padding="52px 32px 46px 32px">
        <Kicker color={colors.ink}>{kicker}</Kicker>
        <Display size={46}>{headline}</Display>
        <Lead>{lead}</Lead>
      </Band>

      <Band padding="36px 32px">
        <StatRow stats={stats} />
        <BodyText>{quote}</BodyText>
        <CTAButton href={cta.href}>{cta.label}</CTAButton>
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default TeamInviteEmail;