What React Email Does
React Email transforms email development from HTML tables into modern React:
- React Components:
<Html>,<Head>,<Body>,<Container>,<Section>,<Row>,<Column>,<Text>,<Link>,<Image>,<Button> - Styling: Inline styles via
styleprop or Tailwind CSS support - Preview Server: Local dev server with hot reload for real-time email editing
- Render to HTML: Convert React components to email-compatible HTML string
- ESP Integration: Works with Resend, Nodemailer, SendGrid, Postmark, AWS SES
- TypeScript: Full type safety for all components and props
Creating an Email Template
import {
Html, Head, Body, Container,
Section, Text, Button, Hr
} from "@react-email/components";
export default function WelcomeEmail({ name }: { name: string }) {
return (
<Html>
<Head />
<Body style={{ backgroundColor: "#f6f9fc", fontFamily: "sans-serif" }}>
<Container style={{ margin: "0 auto", padding: "20px" }}>
<Text style={{ fontSize: "24px", fontWeight: "bold" }}>
Welcome, {name}!
</Text>
<Text>
Thanks for signing up. Get started by exploring our platform.
</Text>
<Hr />
<Button
href="https://example.com/dashboard"
style={{
backgroundColor: "#000",
color: "#fff",
padding: "12px 20px",
borderRadius: "5px",
}}
>
Go to Dashboard
</Button>
</Container>
</Body>
</Html>
);
}Sending with Resend
import { Resend } from "resend";
import WelcomeEmail from "./emails/welcome";
const resend = new Resend("re_123456");
await resend.emails.send({
from: "hello@example.com",
to: "user@example.com",
subject: "Welcome!",
react: WelcomeEmail({ name: "Alice" }),
});Sending with Nodemailer
import { render } from "@react-email/render";
import nodemailer from "nodemailer";
import WelcomeEmail from "./emails/welcome";
const html = await render(WelcomeEmail({ name: "Alice" }));
const transporter = nodemailer.createTransport({ /* SMTP config */ });
await transporter.sendMail({
from: "hello@example.com",
to: "user@example.com",
subject: "Welcome!",
html,
});FAQ
Q: Does React Email work with all email clients? A: Yes. Components render to compatible HTML that works across Gmail, Outlook, Apple Mail, Yahoo, and mobile clients.
Q: Can I use Tailwind CSS?
A: Yes. Install @react-email/tailwind and wrap your email in a <Tailwind> component to use Tailwind utility classes.
Q: Is React Email only for Resend?
A: No. While built by the Resend team, React Email works with any email provider. Use render() to get HTML, then send via any ESP or SMTP.
Q: Can I preview emails before sending?
A: Yes. Run npm run dev for a local preview server with hot reload at localhost:3000.