Skip to main content

Email System

The starter kit includes a complete email system built with React Email and Nodemailer, providing a modern approach to creating and sending beautiful HTML emails.

Overview​

The email system is organized into two main parts:

1. Email Templates (src/mail/)​

  • React components using @react-email/components
  • Each template is a separate file (e.g., welcome.tsx, reset-password.tsx)
  • Templates are imported and rendered to HTML when needed

2. Email Functions (src/util/mail.tsx)​

  • Contains functions to send different types of emails
  • Handles rendering templates to HTML
  • Manages email sending through the email service

Basic Usage​

  1. Create a template in src/mail/:
import { Html, Button, Text } from "@react-email/components";

export default function WelcomeEmail({ name }) {
  return (
    <Html>
      <Text>Welcome {name}!</Text>
      <Button href="https://example.com/dashboard">
        Get Started
      </Button>
    </Html>
  );
}
  1. Create a sending function in src/util/mail.tsx:
import { render } from '@react-email/render';
import WelcomeEmail from "@/mail/welcome";

export const sendWelcomeEmail = async (email: string, name: string) => {
    const html = await render(<WelcomeEmail name={name} />, {
        pretty: true
    });

    await sendEmail({
        to: email,
        subject: "Welcome to Our App!",
        text: `Welcome ${name}!`,
        html
    });
};
Email Structure

For detailed information about creating new email templates and implementing custom designs, see the Creating Email Templates guide.

Development

During development:

  1. Use Mailtrap to catch outgoing emails
  2. Preview templates using React Email's development server
  3. Test with multiple email clients