React Email

Streamlined React Email development for automated transactional messaging and responsive template integration

React Email is a community skill for building responsive HTML emails using React components, covering email layout, styling, component composition, preview rendering, and integration with email sending services for transactional email development.

What Is This?

Overview

React Email provides patterns for creating HTML emails using React component syntax instead of raw HTML tables. It covers layout components including Container, Section, Row, and Column for responsive email structures, inline styling with the style prop for email client compatibility, reusable component composition for headers and footers across templates, preview server for real-time rendering during development, and integration with providers like Resend and SendGrid for sending rendered HTML. The skill enables developers to write maintainable email templates using familiar React patterns while producing HTML that renders correctly across email clients.

Who Should Use This

This skill serves frontend developers creating transactional email templates with React, teams building email notification systems that need consistent branding across templates, and engineers integrating email sending into application backends.

Why Use It?

Problems It Solves

Writing raw HTML email templates with nested tables is verbose and difficult to maintain across many templates. Email client rendering inconsistencies require inline styles and specific HTML patterns that are tedious to write manually. Sharing common elements across email templates leads to duplication without component abstractions. Testing email rendering requires sending test messages instead of local preview.

Core Highlights

React components generate email-safe HTML with proper table layouts and inline styles. Preview server renders templates locally for rapid iteration without sending test emails. Component library provides pre-built elements for buttons, images, links, and headings. Render function converts React components to HTML strings for email service integration.

How to Use It?

Basic Usage

import {
  Html, Head, Body, Container,
  Section, Text, Button, Hr,
} from "@react-email/components";

interface WelcomeProps {
  userName: string;
  loginUrl: string;
}

export default function WelcomeEmail({
  userName, loginUrl,
}: WelcomeProps) {
  return (
    <Html>
      <Head />
      <Body style={{
        backgroundColor: "#f6f6f6",
        fontFamily: "Arial, sans-serif",
      }}>
        <Container style={{
          maxWidth: "580px",
          margin: "0 auto",
          padding: "20px",
        }}>
          <Text style={{
            fontSize: "24px",
            fontWeight: "bold",
          }}>
            Welcome, {userName}
          </Text>
          <Hr />
          <Text>
            Your account is ready.
          </Text>
          <Button href={loginUrl} style={{
            backgroundColor: "#007bff",
            color: "#ffffff",
            padding: "12px 24px",
            borderRadius: "4px",
          }}>
            Sign In
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Real-World Examples

import { render } from "@react-email/render";
import {
  Html, Body, Container, Section,
  Row, Column, Text, Img, Link,
} from "@react-email/components";

interface OrderProps {
  orderId: string;
  items: Array<{
    name: string;
    price: number;
    quantity: number;
  }>;
  total: number;
}

function OrderConfirmation({
  orderId, items, total,
}: OrderProps) {
  return (
    <Html>
      <Body style={{
        fontFamily: "Arial, sans-serif",
      }}>
        <Container style={{
          maxWidth: "600px",
          margin: "0 auto",
        }}>
          <Text style={{ fontSize: "20px" }}>
            Order #{orderId}
          </Text>
          {items.map((item, i) => (
            <Row key={i}>
              <Column>
                <Text>{item.name}</Text>
              </Column>
              <Column align="right">
                <Text>
                  ${item.price} x{" "}
                  {item.quantity}
                </Text>
              </Column>
            </Row>
          ))}
          <Section style={{
            borderTop: "1px solid #ddd",
            marginTop: "16px",
            paddingTop: "16px",
          }}>
            <Text style={{
              fontWeight: "bold",
            }}>
              Total: ${total}
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

const html = await render(
  <OrderConfirmation
    orderId="12345"
    items={[
      { name: "Widget",
        price: 9.99, quantity: 2 },
    ]}
    total={19.98}
  />
);
console.log(`HTML length: ${html.length}`);

Advanced Tips

Create a shared layout component that wraps all email templates with consistent header, footer, and branding styles. Use the render function to generate both HTML and plain text versions for multipart email messages. Test rendered HTML across email clients using tools like Litmus or Email on Acid to verify compatibility.

When to Use It?

Use Cases

Build a transactional email system with templates for welcome, password reset, and order confirmation messages. Create a marketing email builder with reusable components for headers, product cards, and call-to-action buttons. Implement a notification pipeline that renders personalized email content from database event triggers.

Important Notes

Requirements

Node.js with the react-email packages installed. TypeScript or JavaScript project with React support. An email sending service for delivering rendered emails.

Usage Recommendations

Do: use inline styles exclusively since external CSS stylesheets are stripped by most email clients. Test email rendering across Gmail, Outlook, and Apple Mail which have different CSS support levels. Keep email width under 600 pixels for consistent display across devices.

Don't: use CSS Grid or Flexbox layouts that are unsupported in many email clients including Outlook. Include JavaScript in email templates since it is blocked by all major email clients. Embed large images inline when hosted image URLs reduce email size.

Limitations

Email client CSS support is significantly limited compared to web browsers, restricting available styling options. Dark mode rendering varies across email clients and may require special styles. Some email clients strip or modify HTML attributes that affect the final rendered appearance.

More Skills You Might Like

Explore similar skills to enhance your workflow