toolreactemailresendtailwindtypescriptcomponentsopen-sourcezeno-rochaUpdated 2026-07-03

React Email

Unstyled React components for building HTML emails that render consistently across clients (Gmail, Outlook, Apple Mail), plus a self-hostable rich-text email editor. Built by Resend; written with React, Tailwind, and TypeScript.

View original tweet

React Email (resend/react-email, 19,385 GitHub stars as of 2026-07-03) lets you compose emails as React components instead of hand-writing table-based HTML. The library ships primitives that compile to email-client-safe markup, a preview server, and - as of 6.0 - an open-source WYSIWYG editor you can embed in your own app. Source: react.email, https://react.email, 2026-06-12 Source: GitHub resend/react-email, https://github.com/resend/react-email, 2026-07-03

Components

Primitives compile to the inline-styled, table-based HTML that legacy email clients require: Source: react.email, 2026-06-12

Component Role
Html / Head / Body Document scaffold with email-safe defaults
Container / Section / Row / Column Table-based layout that survives Outlook
Heading / Text / Link / Hr Typographic content
Button Bulletproof CTA (renders as a styled table cell)
Img / Preview Images + inbox preview text
Tailwind Wrapper that inlines Tailwind utility classes at build time

The <Tailwind> wrapper means you write className="bg-black text-white" and React Email inlines it to style="..." so it works in clients that strip <style> blocks. Source: react.email, 2026-06-12

The 6.0 editor (open-sourced)

React Email 6.0 open-sourced Resend's internal email editor so teams can embed authoring directly in their product instead of redirecting users to a separate tool: Source: X/@zenorocha, 2026-04-17

  • Embed in your app — drop the editor into a React surface.
  • Style with your brand — themeable to match the host product.
  • Build custom extensions — extend the editor with bespoke blocks.

This puts React Email in the same "own-the-source, embeddable editor" lane as Plate (PlateJS) (rich text) and Extend UI (document viewers) — component kits that ship editor UI rather than a hosted SaaS.

The reviewed launch video shows the editor as an actual authoring surface, not just a splash asset: a presenter introduces the release, code snippets frame the React integration, and the in-app "Wayback Store" demo edits headings inside a branded email-builder canvas. The durable signal is that React Email now covers both rendering primitives and product-embedded authoring. Source: local video artifact review, 2026-07-03

Install

npx create-email@latest          # scaffold a starter project + preview server
npm i react-email @react-email/components

import { Body, Button, Container, Html, Tailwind, Text } from "react-email"

export default function Welcome({ username = "Nicole" }) {
  return (
    <Html>
      <Tailwind>
        <Body className="bg-black font-sans">
          <Container className="mx-auto max-w-[465px] p-5">
            <Text className="text-sm text-white">Hello {username},</Text>
            <Button className="rounded-md bg-white px-5 py-2.5 text-sm font-semibold text-black no-underline" href="https://example.com/start">
              Get Started
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

Pairs with Resend (or any SMTP/ESP) for delivery — render() returns the HTML string. Source: react.email/docs, 2026-06-12

Version Snapshot

Current package snapshot as of 2026-07-03: react-email@6.6.6 is latest on npm, create-email@1.2.5 scaffolds projects, @react-email/components@1.0.12 is the current component package, and @react-email/editor@1.6.1 is the current editor package. The GitHub repo default branch is canary at 6313b3c0b13dd7918d1cc183f37aaac24a0f4cc2, with tag react-email@6.6.6, MIT license, 19,385 stars, 1,057 forks, and a 2026-07-03 push. Source: npm registry and GitHub resend/react-email, 2026-07-03

How it compares

  • vs MJML / Maizzle — React Email keeps you in JSX + Tailwind with full TypeScript types and component reuse, instead of a separate templating DSL.
  • vs hosted email builders — the 6.0 editor is self-hostable and source-owned, so authoring stays inside your app (no per-seat SaaS).
  • Stack fit — the canonical email layer for Next.js / React products; complements transactional sends and AI-drafted copy.

Created by Zeno Rocha (Resend). Launch thread: 1,763 likes, 1,396 bookmarks; demo video. Source: X/@zenorocha, 2026-04-17

Timeline

Related Pages

ReactPlate (PlateJS)Extend UIShadcn UI EcosystemTailwind v4 Style

2 pages link here

Resend Design SkillsToolsX Bookmarks: React & Next.js (Mar–Jun 2026)Tools