React Email — Build Email Templates with React

React Email lets you build and preview email templates using React components.

React Email — Build Email Templates with React
Installation
Basic Template
Sending with Resend
Complex Layout
FAQ

Installation

npm install react-email
npm install -D resend

Basic Template

import { Html, Body, Head, Hr, Container, Preview, Section, Text } from 'react-email'

export function VerificationEmail({ code }: { code: string }) {
  return (
    <Html>
      <Head />
      <Preview>Verify your email</Preview>
      <Body style={main}>
        <Container style={container}>
          <Text style={heading}>Email Verification</Text>
          <Text style={paragraph}>
            Your verification code is:
          </Text>
          <Text style={code}>{code}</Text>
          <Hr style={hr} />
          <Text style={footer}>This code expires in 24 hours.</Text>
        </Container>
      </Body>
    </Html>
  )
}

const main = { fontFamily: 'sans-serif', backgroundColor: '#f3f3f5' }
const container = { margin: '0 auto', padding: '20px 0 48px', width: '560px' }
const heading = { fontSize: '24px', fontWeight: '700', margin: '16px 0' }
const paragraph = { fontSize: '16px', lineHeight: '26px', margin: '16px 0' }
const code = { padding: '12px 16px', backgroundColor: '#e3e3e5', fontSize: '24px', fontWeight: '600' }
const hr = { borderColor: '#e5e5e5', margin: '20px 0' }
const footer = { fontSize: '12px', color: '#666666' }

Sending with Resend

import { Resend } from 'resend'
import { VerificationEmail } from '@/emails/verification'

const resend = new Resend(process.env.RESEND_API_KEY)

export async function sendVerificationEmail(email: string, code: string) {
  const { data, error } = await resend.emails.send({
    from: 'noreply@example.com',
    to: email,
    subject: 'Verify your email',
    react: <VerificationEmail code={code} />
  })

  if (error) throw error
  return data
}

Complex Layout

import {
  Html,
  Body,
  Container,
  Row,
  Column,
  Text,
  Button
} from 'react-email'

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Body style={main}>
        <Container style={container}>
          <Text style={heading}>Welcome {name}!</Text>

          <Row style={paragraph}>
            <Column>
              <Text>Thank you for signing up. We're excited to have you.</Text>
            </Column>
          </Row>

          <Button
            pX={20}
            pY={12}
            style={{ background: '#3B82F6', color: 'white', borderRadius: '6px' }}
            href="https://example.com/dashboard"
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  )
}

FAQ

Q: Can I test emails locally? A: Yes, use Resend Studio for preview and testing.

Q: Does React Email support all HTML? A: Most common HTML/CSS. Check documentation for limitations.

Q: How do I handle responsive emails? A: Use Container, Row, Column components for responsive layouts.

React Email simplifies email template creation with React components.