What is React Email — Build and Send Emails Using React?

React Email lets developers create beautiful HTML emails with React components, preview in browser, and send via Resend, Nodemailer, or any ESP.

Is React Email — Build and Send Emails Using React free to use?

Yes. React Email — Build and Send Emails Using React is freely available on TokRepo. Check the Source & Thanks section on the asset page for the specific open-source license.

How do I install React Email — Build and Send Emails Using React?

Visit the asset page on TokRepo and click "Copy for agent" to get the installation instructions. Most assets can be installed with a single command.

React Email — Build and Send Emails Using React

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 style prop 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.

React Email — Build and Send Emails Using React

What React Email Does

Creating an Email Template

Sending with Resend

Sending with Nodemailer

FAQ

Fuente y agradecimientos

Discusión

Activos relacionados

Unkey — Open-Source API Key Management Platform

Flagsmith — Open-Source Feature Flags and Remote Config

OpenStatus — Open-Source Monitoring and Status Page Platform