Free React Email Verify Email Template

import * as React from 'react';

import {
  Band,
  Brand,
  CodeBlock,
  CTAButton,
  Display,
  EmailLayout,
  Highlight,
  Kicker,
  Lead,
  Note,
} from './components';

export interface VerifyEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  cta?: { label: string; href: string };
  /** The same link, spelled out for anyone whose client eats buttons. */
  fallback?: { intro: string; url: string; reassurance: string };
}

/**
 * Verify email — one job, one button, and the raw link underneath for the
 * clients that strip it.
 */
export function VerifyEmail({
  brand,
  subject = 'Confirm your email address',
  preview = 'One tap to confirm priya@northwind.io and secure your account.',
  label = 'Security',
  kicker = 'Verify your address',
  headline = (
    <>
      CONFIRM
      <br />
      THIS EMAIL.
    </>
  ),
  lead = (
    <>
      {'Tap the button below to confirm '}
      <Highlight color="mint">priya@northwind.io</Highlight>
      {'. The link expires in 24 hours.'}
    </>
  ),
  cta = {
    label: 'Verify email address',
    href: 'https://sonar.example.com/verify?t=8f21c',
  },
  fallback = {
    intro: 'Button not working? Paste this into your browser:',
    url: 'https://sonar.example.com/verify?t=8f21c9a4-77de-4b12-93aa-0e5cd1f0',
    reassurance:
      'If you didn’t create a Sonar account, ignore this email — nothing happens without confirmation.',
  },
}: VerifyEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="mint"
    >
      <Band tone="blue" padding="52px 32px">
        <Kicker color="mint">{kicker}</Kicker>
        <Display size={50} on="light">
          {headline}
        </Display>
        <Lead on="light">{lead}</Lead>
        <CTAButton href={cta.href} background="mint" color="ink">
          {cta.label}
        </CTAButton>
      </Band>

      <Band padding="36px 32px">
        <Note>{fallback.intro}</Note>
        <CodeBlock variant="light" margin="12px 0 0 0">
          {fallback.url}
        </CodeBlock>
        <Note>{fallback.reassurance}</Note>
      </Band>
    </EmailLayout>
  );
}

export default VerifyEmail;