React Email
High-quality, unstyled React components for building responsive HTML emails
Repository Health
Technical Analysis
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
Tailwindwrapper 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.
Used by 39 apps in this directory
AFFiNE
Productivity · Project Management · Note Taking
Write, draw, and plan in one infinite canvas — the open-source alternative to Notion and Miro that keeps your data yours.
Authelia
Security · Authentication
OpenID Certified SSO and MFA portal for securing self-hosted web applications behind reverse proxies.
Cap
Team Chat · Video Conferencing
Open source Loom alternative with GPU-accelerated recording, instant share links, AI summaries, and full self-hosting via Docker Compose.
ChartBrew
Analytics · Databases
Open-source reporting platform to build live dashboards from SQL, NoSQL, APIs, and SaaS tools with an AI assistant that creates charts from natural language.
Docmost
Productivity · Note Taking · Collaboration
Self-hosted collaborative wiki and knowledge base with real-time editing, diagrams, AI assistance, and enterprise access controls — a modern alternative to Confluence and Notion.
Documenso
Digital Signiture
Self-hosted, open-source DocuSign alternative with legally binding PDF signatures, multi-party workflows, and a full REST and tRPC API.
Dokploy
Devops · Hosting Control Panel · Security
Self-hosted PaaS that deploys apps and databases on your own VPS using Docker, Traefik, and multi-build-system orchestration
Dub
Marketing · Analytics
The open-source link attribution platform for short links, conversion tracking, and affiliate programs — powering 100M+ clicks monthly.
FeedDeck
Bookmarks Archiving · Social Media
A TweetDeck-inspired open-source feed reader that unifies RSS, YouTube, GitHub, podcasts, Reddit, Mastodon, and more into a single cross-platform dashboard.
