React Email

High-quality, unstyled React components for building responsive HTML emails

Library

npm

v6.9.3

19,715stars

MIT License

View Source Visit Website

On This Page

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →

90/100Excellent

Development Activity96

Maintenance100

Community68

Maturity56

Momentum40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →

87/100Excellent

Architecture84

Code Quality85

Innovation88

Learning Curve90

React Email is a collection of high-quality, unstyled React components for building responsive HTML emails with TypeScript. It abstracts away the notoriously fragmented email-client rendering landscape, normalizing table-based layouts, inline styles, and Outlook-specific quirks behind a familiar component API like Button, Section, and Html.

The package bundles a renderer that serializes JSX into email-safe HTML and plain text, plus a companion CLI for live-previewing and exporting templates locally, so teams can author, preview, and ship transactional and marketing emails without leaving their React/TypeScript workflow.

What You Get

A full set of email-safe React components (Button, Html, Head, Body, Container, Section, Row, Column, Heading, Text, Link, Img, Hr, CodeBlock, CodeInline, Markdown, Preview, Font, Tailwind) that render to table-based, inline-styled HTML
A built-in renderer (@react-email/render) that converts your JSX tree into cross-client-safe HTML and a plain-text fallback
A CLI (email dev, email build, email export) for live-previewing templates in the browser and exporting static HTML for deployment
A Tailwind wrapper component that converts utility-class styling into the inline styles email clients require
Ready-made integration examples for ten major email service providers, including Resend, SendGrid, Postmark, AWS SES, Mailgun, and Nodemailer

Common Use Cases

Building transactional emails (password resets, receipts, welcome emails) as React components inside an existing app codebase
Authoring marketing/newsletter templates with a live browser preview via the CLI before exporting static HTML
Generating cross-client-safe HTML output to hand off to any ESP/SMTP provider, decoupled from the sending mechanism itself

Under The Hood

Architecture The package is a workspace member (packages/react-email) inside a Turborepo/pnpm monorepo, exporting both a component library (src/components/*) and a CLI (src/cli/*). src/index.ts re-exports @react-email/render (a sibling package that serializes React trees into HTML and plain text via html5parser, entities, and html-to-text) alongside the component set from src/components/index.ts. Each component lives in its own directory (e.g. button/button.tsx) with co-located utilities (utils/parse-padding.ts, utils/px-to-pt.ts) and a .spec.tsx test, and is registered via a shared element-marker.ts helper so the renderer can identify email-safe elements during serialization. The CLI (src/cli/commands: build.ts, dev.ts, export.ts, start.ts) is layered on top of the same package for local preview and static export.

Tech Stack TypeScript makes up roughly 93% of the codebase, with React 18/19 (including RC channels) as a peer dependency. The package is built with tsdown/esbuild into dual ESM (.mjs) and CJS (.cjs) outputs with generated .d.mts/.d.cts declarations. The monorepo is orchestrated with Turborepo and pnpm workspaces (using catalog: dependency pinning), linted and formatted with Biome, versioned via Changesets, and tested with Vitest — including a dedicated e2e Vitest config plus Playwright for browser-level checks.

Code Quality Tests are co-located per component (e.g. button/button.spec.tsx, button/utils/utils.spec.ts) rather than centralized, keeping coverage close to implementation, and run monorepo-wide via turbo run test. Low-level cross-client hacks — such as the Button component’s MSO/Outlook padding workaround using conditional comments and dangerouslySetInnerHTML — are documented inline with comments linking back to the originating GitHub issue. TypeScript prop types (e.g. ButtonProps built on React.ComponentPropsWithoutRef<'a'>) give full native attribute pass-through and forwardRef support without hand-maintained prop lists.

API Design The public API favors minimal abstraction and HTML-familiar naming — <Button href=... style=...>, <Section>, <Html> — with native attributes passed straight through via forwardRef, so existing React and CSS knowledge transfers directly. Styling is inline rather than className-based, sidestepping the single biggest email-rendering pitfall, while the Tailwind wrapper lets teams keep utility-class authoring and have it converted automatically. Getting started requires only npm i react-email and one import; the bundled CLI adds live preview and static export with no extra setup, and the repo documents integration examples for ten major ESPs.