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…

19.8K ·GitHub
React-email
这是做什么的？它是一套高质量、不带样式的 React 组件，用于在 React 和 TypeScript 中构建美观的邮件，而不需要手写邮件 HTML。
它是一个组件库，还是一个负责发送邮件的服务？它是一个组件库，不是发送服务：你把模板写成 React 组件，渲染成 HTML,然后用任意邮件服务商发送这段 HTML。
在我的项目里怎么开始使用？先从 npm 安装 React Email 的相关包（参见 README 的 Install 部分），然后用 React 定义你的邮件模板，按需添加样式和组件。
使用它需要会 React 吗？需要——模板是以 TypeScript 编写的 React 组件形式定义的，所以它面向的是已经在用 React 的开发者。
我还得手写表格布局、想各种办法绕过邮件客户端的兼容问题吗？这些组件让你不用再写基于表格的布局和过时的标记代码，能处理响应式邮件和深色模式，还会处理 Gmail、Outlook 等不同客户端之间的不一致——全部都在最常用的邮件客户端上经过测试。
发邮件必须用 Resend 吗？不用。React Email 是由 Resend 团队开发的 MIT 开源项目，但不绑定任何服务商：渲染出的 HTML 可以通过 Resend、Nodemailer、SendGrid、MailerSend、Mailgun、Postmark、AWS SES、Azure Communication Email、Plunk 或 Scaleway 发送。
为什么用 React 来写邮件，而不直接写 HTML？作者认为邮件开发还停留在 2010 年，靠手写表格和过时的标记代码。他们想像现在构建 Web 应用那样让邮件开发现代化——用组件、TypeScript、深色模式和跨客户端一致性，取代手工维护原始的邮件 HTML。
What are similar projects?chakra-ui, tamagui, react-spectrum, ink-kit, astryx, NativeBase, arc-library, shadcn-admin
Which topics is it in?jsx, templates, responsive, dark-mode, email, tailwindcss, component-library, ui-components, developers, hacktoberfest, html, ui
Creator
resend
Size
171 MB
Stars
19.8K
Updated
CommitOct 15Release[email protected]Oct 14
Age
4y
Commits · 90 Days