Guide · Open source

How to use react-email: install, build and send emails

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

React Email is an open-source (MIT) collection of unstyled components for writing emails in React and TypeScript. This guide shows you how to install it, write a template with its components, convert it to HTML and send it through an email service provider. By the end you will know the basic workflow and where to look next.

React Emailresend/react-email · ★ 19.9k · MIT Install options & downloads

Quick start

1Install the package. Run npm i react-email@latest in your project. Node.js is required.
2Create a template. Write an email as a React component and import components such as Button from react-email.
3Add styles. Pass styles through the style prop on components, as shown in the README example.
4Convert to HTML. Turn the built email into HTML, which the source says can be sent through any email service provider.
5Pick a provider. Choose an integration from the README list, such as Resend, SendGrid or Postmark, and follow its example.
6Send and test. Send the email through your chosen provider and check how it renders in your target email clients.

What you need before you install react-email

React Email is installed as a package, and the source lists Node.js as the prerequisite. You should be comfortable writing React components, since templates are plain React code.

The project is aimed at developers who already build web apps with React. If you only need one plain-text email with no template, it is not the right tool.

Node.js installed on your machine
Basic familiarity with React and TypeScript
An email service provider to send the finished HTML, such as Resend, SendGrid or Postmark

Install react-email with npm

Install the package from your project folder using the npm command from the official README.

npm i react-email@latest

Write your first email template with React components

Define your email as a React component. Include styles and the react-email components where needed. The README example imports Button from react-email and sets an inline style on it.

The components handle table-based layout details for you, so you do not need to hand-write older email markup. The README lists components including Html, Head, Button, Container, Heading, Image, Link, Section, Row, Column and Text (listed as Paragraph).

import { Button } from "react-email";

export default function Email() {
  return (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );
};

Convert the template to HTML and send it

Once an email is built, it can be converted to HTML and sent through any email service provider. The README links to example integrations for Resend, Nodemailer, SendGrid, Mailgun, Postmark, AWS SES and several others.

Pick the example that matches your provider and follow its folder in the repository. The provider handles delivery; React Email handles the template.

Resend
Nodemailer
SendGrid
MailerSend
Mailgun
Postmark
AWS SES
Azure Communication Email
Plunk
Scaleway

Use the AI skill or docs for LLMs (optional)

The README describes an optional React Email skill that teaches coding agents such as Claude Code, Codex, Cursor and GitHub Copilot how to build emails with React Email. Install it with the command shown in the README.

The project also publishes its docs for LLMs at the URL below.

Docs for LLMs: react.email/docs/llms.txt

npx skills add resend/react-email

Know what react-email does and does not cover

React Email handles layout details such as responsive design and dark mode support, and aims to smooth out differences between clients like Gmail and Outlook. The README says all components were tested in Gmail, Apple Mail, Outlook, Yahoo! Mail, HEY and Superhuman.

The README also mentions an Editor built on TipTap and ProseMirror that serializes to React Email components. The core workflow described in the source is code-first, so the Editor is not a substitute for writing templates in React.

Good fit: React developers who want consistent templates across major clients
Not a fit: non-developers who want a drag-and-drop builder as the main workflow
Comparable projects named in the analysis: MJML, maizzle, Mailmeteor, Foundation for Emails

What people use it for

Transactional emails such as account messages sent from a React app
Marketing emails built with the same component set as your web app
Templates that must render consistently across Gmail and Outlook
Sending email through an existing provider like Resend, SendGrid or Postmark

Frequently asked questions

Is react-email free to use?

Yes. The repository is licensed under the MIT License, as stated in the README. The README does not describe paid tiers for the library itself.

What do I need to install react-email?

The source lists Node.js as the prerequisite. Install the package with npm i react-email@latest.

Can I use react-email without Resend?

Yes. The README says emails can be converted to HTML and sent using any email service provider, and it lists examples for several providers besides Resend.

Does react-email support dark mode?

The README says it supports dark mode and takes care of inconsistencies between Gmail, Outlook and other clients, so you do not write that logic yourself.

Is react-email a drag-and-drop email builder?

No. The core workflow is code-first, with templates written in React. The README mentions an Editor built on TipTap and ProseMirror, but the source presents the code workflow as the main one.

What are alternatives to react-email?

The analysis names MJML, maizzle, Mailmeteor and Foundation for Emails as comparable projects. Choose based on whether you want to write templates in React or another format.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

React Email suits React and TypeScript developers who want email templates written as components and sent through an existing provider. If you need a visual drag-and-drop builder or only a single plain-text message, pick a different tool such as one of the comparable projects named above.

Install options & downloads