react-email README

The project's README from github.com/resend/react-email. As one markdown file: README.md.

React email cover

React Email
The next generation of writing emails.
High-quality, unstyled components for creating emails.

Website · GitHub

Introduction

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.

Why

We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in 2026 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.

Install

npm i react-email@latest

Getting started

Define your email template with React, include styles and our components where needed.

import { Button } from "react-email";

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

Components

A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

Editor

React Email also provides an Editor built on top of TipTap and ProseMirror, It serializes to React Email components, and exports email-ready HTML and plain text.

See the Editor documentation for more details.

Integrations

Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:

Support

All components were tested using the most popular email clients.

Gmail logo Apple Mail Outlook logo Yahoo! Mail logo HEY logo Superhuman logo
Gmail ✔ Apple Mail ✔ Outlook ✔ Yahoo! Mail ✔ HEY ✔ Superhuman ✔

Development workflow

  1. Setting up your development environment
  2. Running tests
  3. Linting
  4. Building
  5. Writing documentation

Contributing


Brought to you by Resend, MIT License.

react-email (resend/react-email)

Searching Database…

What is this?It is a collection of high-quality, unstyled React components for building beautiful emails in React and TypeScript instead of hand-writing email HTML.
Is it a component library or a service that sends the emails?It is a component library, not a sending service: you write the template as React components, render it to HTML, and then send that HTML with any email service provider.
How do I get started with it in my project?Install the React Email packages from npm (see the Install section of the README), then define your email template with React, adding styles and components where needed.
Do I need to know React to use it?Yes — templates are defined as React components written in TypeScript, so it is aimed at developers who already work with React.
Do I still have to hand-code table layouts and hack around client quirks?The components spare you table-based layouts and archaic markup, handle responsive emails and dark mode, and take care of inconsistencies between Gmail, Outlook and other clients — all tested on the most popular email clients.
Do I have to use Resend to send the emails?No. React Email is an MIT-licensed project built by the Resend team, but it is provider-agnostic: the rendered HTML can be sent via Resend, Nodemailer, SendGrid, MailerSend, Mailgun, Postmark, AWS SES, Azure Communication Email, Plunk or Scaleway.
Why build emails with React instead of writing HTML directly?The authors argue email development is stuck in 2010, with hand-coded tables and archaic markup. They want it modernized the way web apps are built today — components, TypeScript, dark mode and cross-client consistency instead of maintaining raw email HTML by hand.
Creator
resend
Size
171 MB
Stars
19.8K
Age
4y
Commits · 90 Days