Free React Email Welcome Template

import * as React from 'react';

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

export interface WelcomeEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  steps?: { title: string; items: React.ReactNode[] };
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Welcome — the first email after signup. Hands over the three things that
 * have to happen before the product is worth anything, and nothing else.
 */
export function WelcomeEmail({
  brand,
  subject = 'You’re in. Let’s find your first signal.',
  preview = 'Your Sonar workspace is live — three steps to your first insight.',
  label = 'Welcome',
  kicker = 'Account activated',
  headline = (
    <>
      YOU’RE IN,
      <br />
      PRIYA.
    </>
  ),
  lead = (
    <>
      Your workspace <strong>northwind</strong> is live. Sonar is already
      listening — the moment your first event lands, you’ll see it here.
    </>
  ),
  steps = {
    title: 'Three steps to your first signal',
    items: [
      <>
        <strong>Install the SDK</strong> — one snippet, 4 minutes. Node, Python,
        Ruby, or browser.
      </>,
      <>
        <strong>Name three events</strong> that matter. Signup, activation, and
        the one thing that predicts renewal.
      </>,
      <>
        <strong>Invite your team</strong> so the dashboard becomes the thing
        people argue about.
      </>,
    ],
  },
  cta = {
    label: 'Open your workspace',
    href: 'https://sonar.example.com/onboarding',
  },
  note = (
    <>
      {'Or read the '}
      <InlineLink href="https://sonar.example.com/docs/quickstart">
        5-minute quickstart
      </InlineLink>
      {'. Reply to this email and a human answers — usually within the hour.'}
    </>
  ),
}: WelcomeEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="mint"
    >
      <Band tone="mint" padding="52px 32px 48px 32px">
        <Kicker color={colors.ink}>{kicker}</Kicker>
        <Display>{headline}</Display>
        <Lead>{lead}</Lead>
      </Band>

      <Band padding="40px 32px">
        <SectionTitle lineHeight={27}>{steps.title}</SectionTitle>
        <BulletList items={steps.items} />
        <CTAButton href={cta.href}>{cta.label}</CTAButton>
        <Note>{note}</Note>
      </Band>

      <Band tone="ink" padding="0" />
    </EmailLayout>
  );
}

export default WelcomeEmail;