React Email 6.0 Is Here: One Package, a Visual Editor, and Everything You Need to Migrate

React Email 6.0 dropped on April 16, 2026, and it changes something fundamental about how you install and use the library.

If you have a project with a package.json that lists @react-email/components, @react-email/render, and @react-email/tailwind as separate dependencies that setup is now obsolete. Everything ships in one package: react-email.

This post walks through exactly what changed, why it matters, how to migrate in under ten minutes, and what else landed in this release that is worth your attention.

The One Breaking Change That Affects Everyone

React Email 6.0 unified all components, render utilities, and Tailwind integration into the main react-email package.

Before 6.0, a typical install looked like this:

pnpm add @react-email/components @react-email/render @react-email/tailwind

And your imports looked like this:

import { Html, Head, Body, Button, Text } from '@react-email/components';import { render } from '@react-email/render';import { Tailwind } from '@react-email/tailwind';

With React Email 6.0, you install one package:

pnpm add react-email

And your imports come from one place:

import { Html, Head, Body, Button, Text, Tailwind, render } from 'react-email';

That is it. No more juggling three packages, worrying about version mismatches between @react-email/render and @react-email/components, or adding individual component packages to your dependency list.

How to Migrate an Existing Project

This migration takes about ten minutes for most projects.

Step 1: Uninstall the old packages

pnpm remove @react-email/components @react-email/render @react-email/tailwind# Remove any individual component packages you installed directlypnpm remove @react-email/button @react-email/text @react-email/heading# ... and any others in your package.json

Step 2: Install the unified package

pnpm add react-email

Step 3: Update your imports

Find every file that imports from the old packages and update the source:

// Beforeimport { Html, Head, Body } from '@react-email/components';import { render } from '@react-email/render';import { Tailwind } from '@react-email/tailwind';// After — everything from one placeimport { Html, Head, Body, render, Tailwind } from 'react-email';

If you use VS Code, a project-wide find and replace works well here:

Find: from '@react-email/components'
Replace: from 'react-email'
Repeat for @react-email/render and @react-email/tailwind

Step 4: Check your build

Run your build or type-check after replacing imports. The exported API is the same as before: component names, render function signatures, and Tailwind usage are unchanged. This should be a clean swap for almost all projects.

A Real Email Template After Migration

Here is what a complete transactional email template looks like with React Email 6.0:

import {  Html,  Head,  Body,  Container,  Heading,  Text,  Button,  Tailwind,  render,} from 'react-email';function WelcomeEmail({ name }: { name: string }) {  return (    <Tailwind>      <Html>        <Head />        <Body className="bg-white font-sans">          <Container className="mx-auto max-w-xl py-8 px-4">            <Heading className="text-2xl font-bold text-gray-900">              Welcome, {name}            </Heading>            <Text className="text-gray-600 mt-4">              Thanks for joining. Your account is ready to go.            </Text>            <Button              href="https://yourapp.com/dashboard"              className="bg-black text-white px-6 py-3 rounded mt-6"            >              Open Dashboard            </Button>          </Container>        </Body>      </Html>    </Tailwind>  );}// Render to HTML for sendingexport async function renderWelcomeEmail(name: string): Promise<string> {  return render(<WelcomeEmail name={name} />);}

Clean, minimal, no separate package imports. This is what every React Email project should look like going forward.

What Else Shipped in This Release

The unified package is the headline, but there is more in this release worth knowing about.

The New Visual Editor (Editor 1.0.0)

React Email now ships an embeddable visual editor built on TipTap and ProseMirror.

This is a proper rich text editor designed specifically for composing email templates. It is not a general-purpose document editor bolted onto email. It includes:

Rich text blocks: paragraphs, headings, lists, code blocks, tables
Bubble menus that float above selected text for inline formatting
Slash commands: type / to insert blocks without reaching for a toolbar
Multi-column layouts: two, three, and four-column email structures
Built-in email themes with customizable CSS properties
HTML export that produces email-ready HTML and plain text

The editor is designed to be embedded in your own product, so your users can compose email templates without touching code. This is genuinely useful for SaaS products that need to let non-developers build and edit transactional or marketing email templates inside the app.

Full docs are at the React Email Editor overview.

UI 6.0.0 - Preview Server Renamed

The preview server package was renamed from @react-email/preview-server to @react-email/ui. Same code, cleaner name.

If you referenced the preview server package directly in any scripts or configs, update the package name. Most projects will not need to change anything, the react-email CLI handles this internally.

Tailwind v4 - Now the Default

React Email has been on Tailwind v4 since the v5 release, but with 6.0 and the unified package, Tailwind v4 is now the standard baseline. If you are coming from an older React Email version that used Tailwind v3, the upgrade path is:

Remove the old @react-email/tailwind package
Install react-email
Update your template to import Tailwind from react-email
Review any Tailwind config files and update them to use Tailwind v4 has syntax changes from v3 (config is now CSS-first)

Most utility classes are unchanged, but Tailwind v4 drops the JavaScript config file in favor of a CSS-based configuration. If you were using a custom tailwind.config.js with React Email, check the Tailwind v4 upgrade guide for migration details.

Render 2.0.7 - Export Map Fix

A small but important fix: the export map ordering between Convex and Node runtimes was corrected. If you deploy to Convex or use a non-standard runtime and your render calls behaved oddly, this patch addresses it.

Version History: What Changed and When

For teams upgrading from an older version, here is the condensed changelog of meaningful changes since late 2025:

Version	Date	Key Change
6.0.0	April 16, 2026	Unified package everything in `react-email`
5.2.10	March 17, 2026	Fixed fragment prop usage warnings
5.2.9	February 27, 2026	Fixed esbuild binary path resolution
5.2.0	January 7, 2026	ESM bundling for preview, hot reload fixes on Windows
5.1.0	December 18, 2025	Turbo for `email build`, Tailwind camelCased color fix
5.0.0	November 7, 2025	Dark mode switcher, Resend templates API integration
4.0.0	March 27, 2025	Toolbar with image/link validation and spam scoring
3.0.0	August 22, 2024	Built preview app, React 19 support

If you are on 3.x or 4.x, the jump to 6.0 involves the unified package change plus the Tailwind v4 changes from 5.0. The migration steps above cover both.

Common Questions After This Change

Do I need to update the react-email CLI usage?

No. The CLI commands (email dev, email build, email export) are unchanged. Upgrade the package and run your existing commands.

Can I still use individual components from their own packages?

The individual packages still exist on npm for compatibility reasons, but you should not install them directly anymore. The react-email package is the maintained path going forward.

Does this work with Resend?

Yes. Resend uses render from react-email (or the equivalent) to turn your React component into an HTML string. The function signature is the same. Just update the import source:

// Oldimport { render } from '@react-email/render';// Newimport { render } from 'react-email';

Your Resend email sending code does not change at all beyond the import line.

What if I use Next.js?

React Email 6.0 works with Next.js App Router and Pages Router. Server Components can import and render email templates server-side. The render function works in Node.js route handlers and Server Actions.

Developer Checklist for the 6.0 Migration

Remove @react-email/components, @react-email/render, @react-email/tailwind from package.json
Remove any individual component packages (@react-email/button, etc.) from package.json
Run pnpm add react-email (or npm/yarn equivalent)
Find and replace all @react-email/* import sources with react-email
Run type-check: tsc --noEmit
Run your email preview server: email dev
Send a test email to verify rendered output is correct
Check that any Tailwind classes still work as expected

Why This Matters Beyond the Migration

The unified package is not just a convenience change. It solves a real ongoing pain point that React Email users dealt with constantly: version drift between packages.

Before 6.0, you had to keep @react-email/components, @react-email/render, @react-email/tailwind, and individual component packages all synchronized. A patch to @react-email/render meant updating @react-email/components too. Dependabot PRs multiplied. Version ranges between packages sometimes conflicted.

With one package, those problems disappear. You have one version number to track, one changelog to read, one package update to ship. It is the kind of ergonomic improvement that seems small until you have spent an afternoon debugging a subtle mismatch between component and render versions.

Final Thoughts

React Email 6.0 is a clean, well-considered release. The unified package is the right call — it simplifies onboarding for new projects and reduces maintenance overhead for existing ones. The visual editor adds a capability that was genuinely missing for product teams who need non-developers to manage email templates.

If you are starting a new project today, the install is simply:

pnpm add react-email

And you are done. That is a meaningfully better starting point than before.

For existing projects, the migration is straightforward — half an hour at most, mostly find-and-replace work. Upgrade sooner rather than later so you stay on the maintained path.

Source: React Email Changelog · React Email Migration Guide

Building transactional emails or designing email templates for your product? Websyro Agency helps SaaS teams ship polished, reliable email systems using React Email and Resend. Talk to us for the first consultation is free.