Free React Email Weekly Digest Template

import * as React from 'react';

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

export interface WeeklyDigestEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  stats?: Stat[];
  /** The three things worth ten minutes. */
  attention?: { title: string; items: React.ReactNode[] };
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Weekly digest — one number in the headline, three in the row, and three
 * things that actually need a human. Everything else stays in the dashboard.
 */
export function WeeklyDigestEmail({
  brand,
  subject = 'Northwind, week 34: activation up 11%',
  preview = 'Activation +11%, one funnel regression, and your top segment this week.',
  label = 'Weekly digest · Aug 17–23',
  kicker = 'Week 34 · Northwind',
  headline = (
    <>
      ACTIVATION
      <br />
      UP 11%.
    </>
  ),
  lead = 'Best week since June. The win came from mobile signups — and there’s one regression worth ten minutes.',
  stats = [
    { value: '+11%', label: 'activation' },
    { value: '24.9K', label: 'weekly actives' },
    { value: '−3.2%', label: 'week-2 retention' },
  ],
  attention = {
    title: 'Worth your attention',
    items: [
      <>
        <strong>Step 3 drop-off rose to 38%</strong> after Tuesday’s release —
        Android only.
      </>,
      <>
        <strong>Enterprise trials converted at 41%</strong>, double the account
        average.
      </>,
      <>
        <strong>API latency p95 crossed 800ms</strong> on Thursday for 22
        minutes.
      </>,
    ],
  },
  cta = {
    label: 'Open the dashboard',
    href: 'https://sonar.example.com/d/weekly',
  },
  note = (
    <>
      {'You’re getting this because you own the Northwind workspace. '}
      <InlineLink
        href="https://sonar.example.com/settings/notifications"
        color="mint"
      >
        Change to monthly
      </InlineLink>
      {'.'}
    </>
  ),
}: WeeklyDigestEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="mint"
    >
      <Band tone="blue" padding="46px 32px 40px 32px">
        <Kicker color="mint">{kicker}</Kicker>
        <Display size={48} on="light">
          {headline}
        </Display>
        <Lead color={colors.paper}>{lead}</Lead>
      </Band>

      <Band padding="34px 32px">
        <StatRow stats={stats} />
        <SectionTitle size={22}>{attention.title}</SectionTitle>
        <BulletList items={attention.items} marker="orange" />
        <CTAButton href={cta.href} background="ink" color="mint">
          {cta.label}
        </CTAButton>
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default WeeklyDigestEmail;