Free React Email Password Reset Template

import * as React from 'react';

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

export interface PasswordResetEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  cta?: { label: string; href: string };
  /** Where and when it was asked for — the part that catches an attack. */
  request?: DataRow[];
  note?: React.ReactNode;
}

/**
 * Password reset — the request's own metadata is the security feature: if the
 * device or city is wrong, the recipient knows before they click anything.
 */
export function PasswordResetEmail({
  brand,
  subject = 'Reset your Sonar password',
  preview = 'A reset link for your Sonar account — valid for 60 minutes.',
  label = 'Security',
  kicker = 'Password reset requested',
  headline = (
    <>
      LET’S GET
      <br />
      YOU BACK IN.
    </>
  ),
  lead = (
    <>
      {'Someone asked to reset the password for '}
      <Highlight>priya@northwind.io</Highlight>
      {'. If that was you, set a new one now. The link works for 60 minutes.'}
    </>
  ),
  cta = {
    label: 'Choose a new password',
    href: 'https://sonar.example.com/reset?t=a91f',
  },
  request = [
    { label: 'Request time', value: 'Aug 24, 09:41 PT' },
    { label: 'Device', value: 'Chrome on macOS' },
    { label: 'Approx. location', value: 'Lisbon, PT' },
  ],
  note = (
    <>
      {'Didn’t request this? Your password hasn’t changed. '}
      <InlineLink href="https://sonar.example.com/security">
        Review account activity
      </InlineLink>
      {' or reply and we’ll lock things down.'}
    </>
  ),
}: PasswordResetEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="orange"
    >
      <Band tone="ink" padding="52px 32px">
        <Kicker color="orange">{kicker}</Kicker>
        <Display size={48} on="light">
          {headline}
        </Display>
        <Lead color={colors.muted}>{lead}</Lead>
        <CTAButton href={cta.href} background="orange" color="ink">
          {cta.label}
        </CTAButton>
      </Band>

      <Band padding="36px 32px">
        <DataTable rows={request} />
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default PasswordResetEmail;