Emails

Transactional emails with React Email and Resend.

Overview

Email templates are built with React Email and sent via Resend. Three templates are included: welcome, email verification, and password reset.

Setup

Sign up at resend.com
Add your API key to .env.local as RESEND_API_KEY
Verify your domain in Resend
Update the from address in config.ts:

email: {
  from: 'YourSaaS <noreply@yoursaas.com>',
  supportEmail: 'support@yoursaas.com',
}

Sending Emails

import { sendWelcomeEmail } from '@/lib/resend/send'

await sendWelcomeEmail({
  email: 'user@example.com',
  name: 'John',
})

Templates

Templates live in the emails/ directory:

Template	File	Trigger
Welcome	`emails/welcome.tsx`	After signup
Verify Email	`emails/verify-email.tsx`	Email confirmation
Reset Password	`emails/reset-password.tsx`	Password reset request

Creating New Templates

Create a new file in emails/:

import { Html, Head, Body, Text } from '@react-email/components'

export default function MyEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body>
        <Text>Hello {name}!</Text>
      </Body>
    </Html>
  )
}

Add a send function in lib/resend/send.ts

Previewing Templates

Use the React Email dev server to preview your templates locally:

npx email dev