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
Что это такое?Это набор качественных неоформленных (unstyled) React-компонентов для создания красивых писем на React и TypeScript вместо того, чтобы вручную писать HTML для писем.
Это библиотека компонентов или сервис, который отправляет письма?Это библиотека компонентов, а не сервис рассылки: вы описываете шаблон в виде React-компонентов, рендерите его в HTML, а затем отправляете этот HTML через любого провайдера почтовых сервисов.
Как начать пользоваться этим в своём проекте?Установите пакеты React Email из npm (см. раздел Install в README), а затем опишите шаблон письма с помощью React, добавляя стили и компоненты там, где нужно.
Нужно ли знать React, чтобы пользоваться этим?Да — шаблоны описываются как React-компоненты, написанные на TypeScript, поэтому проект рассчитан на разработчиков, которые уже работают с React.
Мне всё ещё придётся вручную верстать таблицами и обходить капризы почтовых клиентов?Компоненты избавляют от вёрстки таблицами и устаревшей разметки, поддерживают адаптивные письма и тёмную тему и сглаживают различия между Gmail, Outlook и другими клиентами — всё протестировано на самых популярных почтовых клиентах.
Обязательно ли использовать Resend для отправки писем?Нет. React Email — проект под лицензией MIT, созданный командой Resend, но он не привязан к конкретному провайдеру: отрендеренный HTML можно отправить через Resend, Nodemailer, SendGrid, MailerSend, Mailgun, Postmark, AWS SES, Azure Communication Email, Plunk или Scaleway.
Почему письма лучше делать на React, а не писать HTML напрямую?Авторы считают, что разработка писем застряла в 2010 году: таблицы, набранные вручную, и устаревшая разметка. Они хотят привести её к тому виду, в котором сегодня создают веб-приложения, — компоненты, 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.2 MB
Stars
19.8K
Updated
CommitOct 16Release[email protected]Oct 16
Age
4y
Commits · 90 Days