Letterbench › React Email templates

React Email templates for SaaS

17 transactional and lifecycle emails as typed React Email (TSX) components: welcome, verify email, password reset, receipt, failed payment, trial ending, team invite, NPS survey and more. Each exports subject(), a plain-text text() function and PreviewProps.

Get all 17 from £29 3 free (MIT)

Example: password reset (free in Lite)

// password-reset: Security. Generated by react/generate.js from templates.js.
import * as React from 'react';
import { Layout, Eyebrow, H1, P, CTA, FallbackLink, Note } from './components/ui';

export interface PasswordResetEmailProps {
  actionUrl: string;
  companyAddress: string;
  expiryMinutes: string;
  logoUrl: string;
  productName: string;
  supportEmail: string;
  userFirstName: string;
}

export const subject = ({ productName }: Pick<PasswordResetEmailProps, 'productName'>) =>
  `Reset your ${productName} password`;

export default function PasswordResetEmail(props: PasswordResetEmailProps) {
  const { actionUrl, companyAddress, expiryMinutes, logoUrl, productName, supportEmail, userFirstName } = props;
  return (
    <Layout title={`Reset your ${productName} password`} preview={`A password reset was requested for your account.`} productName={productName} logoUrl={logoUrl} companyAddress={companyAddress} supportEmail={supportEmail}>
      <Eyebrow>Security</Eyebrow>
      <H1>Reset your password</H1>
      <P>Hi {userFirstName}, we received a request to reset the password for your account.</P>
      <CTA href={actionUrl}>Choose a new password</CTA>
      <FallbackLink href={actionUrl} />
      <Note>This link expires in {expiryMinutes} minutes and can be used once. If you didn't ask for this, your password has not changed and you can ignore this email.</Note>
    </Layout>
  );
}

/** Plain-text version: send it alongside the HTML (e.g. Resend/Postmark `text`). */
export function text(props: PasswordResetEmailProps): string {
  const { actionUrl, companyAddress, expiryMinutes, logoUrl, productName, supportEmail, userFirstName } = props;
  return [
    `Reset your ${productName} password`,
    '',
    `SECURITY`,
    `Reset your password`,
    '',
    `Hi ${userFirstName}, we received a request to reset the password for your account.`,
    '',
    `Choose a new password: ${actionUrl}`,
    '',
    `This link expires in ${expiryMinutes} minutes and can be used once. If you didn't ask for this, your password has not changed and you can ignore this email.`,
    '',
    '--',
    `${productName} · ${companyAddress}`,
    `Need help? ${supportEmail}`,
  ].join('\n').replace(/\n{3,}/g, '\n\n') + '\n';
}

PasswordResetEmail.PreviewProps = {
  "actionUrl": "https://app.example.com/a/9f8e7d",
  "companyAddress": "1 Example Street, London EC1A 1AA, UK",
  "expiryMinutes": "30",
  "logoUrl": "https://placehold.co/240x60/2F5BEA/FFFFFF/png?text=Acme",
  "productName": "Acme Cloud",
  "supportEmail": "support@example.com",
  "userFirstName": "Sam"
} satisfies PasswordResetEmailProps;

Sending it

import { render } from '@react-email/render';
import PasswordResetEmail, { subject, text } from './emails/password-reset';

const html = await render(<PasswordResetEmail {...props} />);
await provider.send({ to, subject: subject(props), html, text: text(props) });

Same templates in MJML

Prefer Handlebars and compiled HTML? Every template also ships as MJML + Handlebars, with the same copy, design and tests.

FAQ

See all 17 with screenshots · Letterbench vs reactemailtemplates.com