# Table of Contents
- [Send email using Resend - React Email](#send-email-using-resend-react-email)
- [Send email using SendGrid - React Email](#send-email-using-sendgrid-react-email)
- [React Email - React Email](#react-email-react-email)
- [Send email using Postmark - React Email](#send-email-using-postmark-react-email)
- [Send email using AWS SES - React Email](#send-email-using-aws-ses-react-email)
- [React Email - React Email](#react-email-react-email)
- [Roadmap - React Email](#roadmap-react-email)
- [CLI - React Email](#cli-react-email)
- [Deployment - React Email](#deployment-react-email)
- [Updating React Email - React Email](#updating-react-email-react-email)
- [Changelog - React Email](#changelog-react-email)
- [Migrating to React Email - React Email](#migrating-to-react-email-react-email)
- [HTML - React Email](#html-react-email)
- [Automatic Setup - React Email](#automatic-setup-react-email)
- [Head - React Email](#head-react-email)
- [Container - React Email](#container-react-email)
- [Button - React Email](#button-react-email)
- [Row - React Email](#row-react-email)
- [Code Inline - React Email](#code-inline-react-email)
- [Manual Setup - React Email](#manual-setup-react-email)
- [Column - React Email](#column-react-email)
- [Hr - React Email](#hr-react-email)
- [Code Block - React Email](#code-block-react-email)
- [Section - React Email](#section-react-email)
- [Preview - React Email](#preview-react-email)
- [Font - React Email](#font-react-email)
- [Link - React Email](#link-react-email)
- [Image - React Email](#image-react-email)
- [Markdown - React Email](#markdown-react-email)
- [Overview - React Email](#overview-react-email)
- [Tailwind - React Email](#tailwind-react-email)
- [Heading - React Email](#heading-react-email)
- [Opening issues - React Email](#opening-issues-react-email)
- [Text - React Email](#text-react-email)
- [Opening pull requests - React Email](#opening-pull-requests-react-email)
- [Send email using Scaleway Transactional Email - React Email](#send-email-using-scaleway-transactional-email-react-email)
- [Send email using Plunk - React Email](#send-email-using-plunk-react-email)
- [Send email using MailerSend - React Email](#send-email-using-mailersend-react-email)
- [Send email using Nodemailer - React Email](#send-email-using-nodemailer-react-email)
- [Render - React Email](#render-react-email)
- [Codebase overview - React Email](#codebase-overview-react-email)
- [Getting Started - React Email](#getting-started-react-email)
- [Monorepo setup - React Email](#monorepo-setup-react-email)
- [Setting up for npm workspaces - React Email](#setting-up-for-npm-workspaces-react-email)
- [Setting up for bun workspaces - React Email](#setting-up-for-bun-workspaces-react-email)
- [Linting - React Email](#linting-react-email)
- [Running tests - React Email](#running-tests-react-email)
- [Building - React Email](#building-react-email)
- [Setup - React Email](#setup-react-email)
- [Writing docs - React Email](#writing-docs-react-email)
- [Setting up for pnpm workspaces - React Email](#setting-up-for-pnpm-workspaces-react-email)
- [Setting up for yarn workspaces - React Email](#setting-up-for-yarn-workspaces-react-email)
- [Editing the components - React Email](#editing-the-components-react-email)
---
# Send email using Resend - React Email
[Skip to main content](https://react.email/docs/integrations/resend#content-area)
[React Email home page](https://react.email/docs)
Search...
Ctrl K
Search...
Navigation
Integrations
Send email using Resend
On this page
* [Send email with Resend](https://react.email/docs/integrations/resend#send-email-with-resend)
* [1\. Install dependencies](https://react.email/docs/integrations/resend#1-install-dependencies)
* [2\. Create an email using React](https://react.email/docs/integrations/resend#2-create-an-email-using-react)
* [3\. Send email](https://react.email/docs/integrations/resend#3-send-email)
* [Set up Templates with Resend](https://react.email/docs/integrations/resend#set-up-templates-with-resend)
* [1\. Add your Resend API Key](https://react.email/docs/integrations/resend#1-add-your-resend-api-key)
* [2\. Upload a Template to Resend](https://react.email/docs/integrations/resend#2-upload-a-template-to-resend)
* [Try it yourself](https://react.email/docs/integrations/resend#try-it-yourself)
[](https://react.email/docs/integrations/resend#send-email-with-resend)
Send email with Resend
--------------------------------------------------------------------------------------------------
Resend was built by the same team that created React Email, which makes this our recommendation to send emails.
###
[](https://react.email/docs/integrations/resend#1-install-dependencies)
1\. Install dependencies
Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components)
package and the [Resend Node.js SDK](https://www.npmjs.com/package/resend)
.
npm
yarn
pnpm
Copy
npm install resend @react-email/components
###
[](https://react.email/docs/integrations/resend#2-create-an-email-using-react)
2\. Create an email using React
Start by building your email template in a `.jsx` or `.tsx` file.
email.tsx
Copy
import * as React from 'react';
import { Html, Button } from "@react-email/components";
export function Email(props) {
const { url } = props;
return (
);
}
export default Email;
###
[](https://react.email/docs/integrations/resend#3-send-email)
3\. Send email
When integrating with other services, you need to convert your React template into HTML before sending. Resend takes care of that for you.
Import the email template you just built and use the Resend SDK to send it.
Copy
import { Resend } from 'resend';
import { Email } from './email';
const resend = new Resend('re_123456789');
await resend.emails.send({
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
react: ,
});
[](https://react.email/docs/integrations/resend#set-up-templates-with-resend)
Set up Templates with Resend
--------------------------------------------------------------------------------------------------------------
[Resend Templates](https://resend.com/docs/dashboard/templates/introduction)
are a great way to collaborate on emails with your team, even if they’re not technical. Upload a React Email Template to Resend and your entire team can collaborate in real-time in the visual editor. Here’s how to get started.
###
[](https://react.email/docs/integrations/resend#1-add-your-resend-api-key)
1\. Add your Resend API Key
First, sign up for a [free Resend account](https://resend.com/signup)
. Next, set up the Resend integration using the React Email CLI:
Copy
npx react-email@latest resend setup
This will prompt you to enter your Resend API Key. To get one, navigate to [API Keys](https://resend.com/api-keys)
in your Resend dashboard, click **Create API key**, and ensure that the API Key is scoped to **Full Access**. Paste the API Key into the terminal and press enter.
###
[](https://react.email/docs/integrations/resend#2-upload-a-template-to-resend)
2\. Upload a Template to Resend
Run React Email and visit the **Resend** tab of the toolbar, located at the bottom of the window. Choose **Upload** or **Bulk Upload** to import your Template to Resend. If you want to remove the Resend integration, run `npx react-email@latest resend reset`.
[](https://react.email/docs/integrations/resend#try-it-yourself)
Try it yourself
------------------------------------------------------------------------------------
[Resend example\
--------------\
\
See the full source code.](https://github.com/resend/react-email/tree/main/examples/resend)
[Overview](https://react.email/docs/integrations/overview)
[Nodemailer](https://react.email/docs/integrations/nodemailer)
Ctrl+I
Assistant
Responses are generated using AI and may contain mistakes.
---
# Send email using SendGrid - React Email
[Skip to main content](https://react.email/docs/integrations/sendgrid#content-area)
[React Email home page](https://react.email/docs)
Search...
Ctrl K
Search...
Navigation
Integrations
Send email using SendGrid
On this page
* [1\. Install dependencies](https://react.email/docs/integrations/sendgrid#1-install-dependencies)
* [2\. Create an email using React](https://react.email/docs/integrations/sendgrid#2-create-an-email-using-react)
* [3\. Convert to HTML and send email](https://react.email/docs/integrations/sendgrid#3-convert-to-html-and-send-email)
* [Try it yourself](https://react.email/docs/integrations/sendgrid#try-it-yourself)
[](https://react.email/docs/integrations/sendgrid#1-install-dependencies)
1\. Install dependencies
------------------------------------------------------------------------------------------------------
Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components)
package and the [SendGrid Node.js SDK](https://www.npmjs.com/package/@sendgrid/mail)
.
npm
yarn
pnpm
Copy
npm install @sendgrid/mail @react-email/components
[](https://react.email/docs/integrations/sendgrid#2-create-an-email-using-react)
2\. Create an email using React
--------------------------------------------------------------------------------------------------------------------
Start by building your email template in a `.jsx` or `.tsx` file.
email.tsx
Copy
import * as React from "react";
import { Html, Button } from "@react-email/components";
export function Email(props) {
const { url } = props;
return (
);
}
[](https://react.email/docs/integrations/sendgrid#3-convert-to-html-and-send-email)
3\. Convert to HTML and send email
--------------------------------------------------------------------------------------------------------------------------
Import the email template you just built, convert into an HTML string, and use the SendGrid SDK to send it.
Copy
import { render } from "@react-email/components";
import sendgrid from "@sendgrid/mail";
import { Email } from "./email";
sendgrid.setApiKey(process.env.SENDGRID_API_KEY);
const emailHtml = await render();
const options = {
from: "you@example.com",
to: "user@gmail.com",
subject: "hello world",
html: emailHtml,
};
sendgrid.send(options);
[](https://react.email/docs/integrations/sendgrid#try-it-yourself)
Try it yourself
--------------------------------------------------------------------------------------
[SendGrid example\
----------------\
\
See the full source code.](https://github.com/resend/react-email/tree/main/examples/sendgrid)
[Nodemailer](https://react.email/docs/integrations/nodemailer)
[Postmark](https://react.email/docs/integrations/postmark)
Ctrl+I
Assistant
Responses are generated using AI and may contain mistakes.
---
# React Email - React Email
[Skip to main content](https://react.email/docs#content-area)
[React Email home page](https://react.email/docs)
Search...
Ctrl K
Search...
Navigation
Overview
React Email
On this page
* [Why](https://react.email/docs#why)
* [Getting Started](https://react.email/docs#getting-started)
* [Components](https://react.email/docs#components)
* [Integrations](https://react.email/docs#integrations)
* [Support](https://react.email/docs#support)
* [Authors](https://react.email/docs#authors)
[](https://react.email/docs#why)
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 2025 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.
[](https://react.email/docs#getting-started)
Getting Started
----------------------------------------------------------------
React Email is designed to be incrementally adopted, so you can add it to most codebases in a few minutes.
[Automatic Setup\
---------------\
\
Add React Email to any JavaScript or TypeScript project in minutes.](https://react.email/docs/getting-started/automatic-setup)
[Manual Setup\
------------\
\
Create a brand-new folder with packages powered by React Email.](https://react.email/docs/getting-started/manual-setup)
[](https://react.email/docs#components)
Components
------------------------------------------------------
This is 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.
[HTML\
----\
\
A React html component to wrap emails.](https://react.email/docs/components/html)
[Container\
---------\
\
The main wrapper that hold your content.](https://react.email/docs/components/container)
[Button\
------\
\
A React button component to help build emails.](https://react.email/docs/components/button)
[Text\
----\
\
A block of text separated by blank spaces.](https://react.email/docs/components/text)
[](https://react.email/docs#integrations)
Integrations
----------------------------------------------------------
In order to use React Email with any email service provider, you’ll need to convert the components made with React into a HTML string. This is done using the [render](https://react.email/docs/utilities/render)
utility.
[Resend\
------\
\
Send email using Resend](https://react.email/docs/integrations/resend)
[Nodemailer\
----------\
\
Send email using Nodemailer](https://react.email/docs/integrations/nodemailer)
[SendGrid\
--------\
\
Send email using SendGrid](https://react.email/docs/integrations/sendgrid)
[Postmark\
--------\
\
Send email using Postmark](https://react.email/docs/integrations/postmark)
[AWS SES\
-------\
\
Send email using AWS SES](https://react.email/docs/integrations/aws-ses)
[MailerSend\
----------\
\
Send email using MailerSend](https://react.email/docs/integrations/mailersend)
[Scaleway\
--------\
\
Send email using Scaleway](https://react.email/docs/integrations/scaleway)
[Plunk\
-----\
\
Send email using Plunk](https://react.email/docs/integrations/plunk)
[](https://react.email/docs#support)
Support
------------------------------------------------
All components were tested using the most popular email clients.
Gmail
Apple Mail
Outlook
Yahoo! Mail
HEY
Superhuman
[](https://react.email/docs#authors)
Authors
------------------------------------------------
* Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)
)
* Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)
)
[Changelog](https://react.email/docs/changelog)
Ctrl+I
Assistant
Responses are generated using AI and may contain mistakes.
---
# Send email using Postmark - React Email
[Skip to main content](https://react.email/docs/integrations/postmark#content-area)
[React Email home page](https://react.email/docs)
Search...
Ctrl K
Search...
Navigation
Integrations
Send email using Postmark
On this page
* [1\. Install dependencies](https://react.email/docs/integrations/postmark#1-install-dependencies)
* [2\. Create an email using React](https://react.email/docs/integrations/postmark#2-create-an-email-using-react)
* [3\. Convert to HTML and send email](https://react.email/docs/integrations/postmark#3-convert-to-html-and-send-email)
* [Try it yourself](https://react.email/docs/integrations/postmark#try-it-yourself)
[](https://react.email/docs/integrations/postmark#1-install-dependencies)
1\. Install dependencies
------------------------------------------------------------------------------------------------------
Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components)
package and the [Postmark Node.js SDK](https://www.npmjs.com/package/postmark)
.
npm
yarn
pnpm
Copy
npm install postmark @react-email/components
[](https://react.email/docs/integrations/postmark#2-create-an-email-using-react)
2\. Create an email using React
--------------------------------------------------------------------------------------------------------------------
Start by building your email template in a `.jsx` or `.tsx` file.
email.tsx
Copy
import * as React from 'react';
import { Html, Button } from "@react-email/components";
export function Email(props) {
const { url } = props;
return (
);
}
[](https://react.email/docs/integrations/postmark#3-convert-to-html-and-send-email)
3\. Convert to HTML and send email
--------------------------------------------------------------------------------------------------------------------------
Import the email template you just built, convert into an HTML string, and use the Postmark SDK to send it.
Copy
import { render } from '@react-email/components';
import postmark from 'postmark';
import { Email } from './email';
const client = new postmark.ServerClient(process.env.POSTMARK_API_KEY);
const emailHtml = await render();
const options = {
From: 'you@example.com',
To: 'user@gmail.com',
Subject: 'hello world',
HtmlBody: emailHtml,
};
await client.sendEmail(options);
[](https://react.email/docs/integrations/postmark#try-it-yourself)
Try it yourself
--------------------------------------------------------------------------------------
[Postmark example\
----------------\
\
See the full source code.](https://github.com/resend/react-email/tree/main/examples/postmark)
[SendGrid](https://react.email/docs/integrations/sendgrid)
[AWS SES](https://react.email/docs/integrations/aws-ses)
Ctrl+I
Assistant
Responses are generated using AI and may contain mistakes.
---
# Send email using AWS SES - React Email
[Skip to main content](https://react.email/docs/integrations/aws-ses#content-area)
[React Email home page](https://react.email/docs)
Search...
Ctrl K
Search...
Navigation
Integrations
Send email using AWS SES
On this page
* [1\. Install dependencies](https://react.email/docs/integrations/aws-ses#1-install-dependencies)
* [2\. Create an email using React](https://react.email/docs/integrations/aws-ses#2-create-an-email-using-react)
* [3\. Convert to HTML and send email](https://react.email/docs/integrations/aws-ses#3-convert-to-html-and-send-email)
* [Try it yourself](https://react.email/docs/integrations/aws-ses#try-it-yourself)
[](https://react.email/docs/integrations/aws-ses#1-install-dependencies)
1\. Install dependencies
-----------------------------------------------------------------------------------------------------
Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components)
package and the [AWS SES Node.js SDK](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-ses/)
.
npm
yarn
pnpm
Copy
npm install @aws-sdk/client-ses @react-email/components
[](https://react.email/docs/integrations/aws-ses#2-create-an-email-using-react)
2\. Create an email using React
-------------------------------------------------------------------------------------------------------------------
Start by building your email template in a `.jsx` or `.tsx` file.
email.tsx
Copy
import * as React from 'react';
import { Html, Button } from "@react-email/components";
export function Email(props) {
const { url } = props;
return (
);
}
[](https://react.email/docs/integrations/aws-ses#3-convert-to-html-and-send-email)
3\. Convert to HTML and send email
-------------------------------------------------------------------------------------------------------------------------
Import the email template you just built, convert into an HTML string, and use the AWS SES SDK to send it.
Copy
import type { SendEmailCommandInput } from "@aws-sdk/client-ses";
import { render } from '@react-email/components';
import { SES } from '@aws-sdk/client-ses';
import { Email } from './email';
const ses = new SES({ region: process.env.AWS_SES_REGION })
const emailHtml = await render();
const params: SendEmailCommandInput = {
Source: 'you@example.com',
Destination: {
ToAddresses: ['user@gmail.com'],
},
Message: {
Body: {
Html: {
Charset: 'UTF-8',
Data: emailHtml,
},
},
Subject: {
Charset: 'UTF-8',
Data: 'hello world',
},
},
};
await ses.sendEmail(params);
[](https://react.email/docs/integrations/aws-ses#try-it-yourself)
Try it yourself
-------------------------------------------------------------------------------------
[AWS SES example\
---------------\
\
See the full source code.](https://github.com/resend/react-email/tree/main/examples/aws-ses)
[Postmark](https://react.email/docs/integrations/postmark)
[MailerSend](https://react.email/docs/integrations/mailersend)
Ctrl+I
Assistant
Responses are generated using AI and may contain mistakes.
---
# React Email - React Email
[Skip to main content](https://react.email/docs/introduction#content-area)
[React Email home page](https://react.email/docs)
Search...
⌘K
Search...
Navigation
Overview
React Email
On this page
* [Why](https://react.email/docs/introduction#why)
* [Getting Started](https://react.email/docs/introduction#getting-started)
* [Components](https://react.email/docs/introduction#components)
* [Integrations](https://react.email/docs/introduction#integrations)
* [Support](https://react.email/docs/introduction#support)
* [Authors](https://react.email/docs/introduction#authors)
[](https://react.email/docs/introduction#why)
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 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.
[](https://react.email/docs/introduction#getting-started)
Getting Started
-----------------------------------------------------------------------------
React Email is designed to be incrementally adopted, so you can add it to most codebases in a few minutes.
[Automatic Setup\
---------------\
\
Add React Email to any JavaScript or TypeScript project in minutes.](https://react.email/docs/getting-started/automatic-setup)
[Manual Setup\
------------\
\
Create a brand-new folder with packages powered by React Email.](https://react.email/docs/getting-started/manual-setup)
[](https://react.email/docs/introduction#components)
Components
-------------------------------------------------------------------
This is 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.
[HTML\
----\
\
A React html component to wrap emails.](https://react.email/docs/components/html)
[Container\
---------\
\
The main wrapper that hold your content.](https://react.email/docs/components/container)
[Button\
------\
\
A React button component to help build emails.](https://react.email/docs/components/button)
[Text\
----\
\
A block of text separated by blank spaces.](https://react.email/docs/components/text)
[](https://react.email/docs/introduction#integrations)
Integrations
-----------------------------------------------------------------------
In order to use React Email with any email service provider, you’ll need to convert the components made with React into a HTML string. This is done using the [render](https://react.email/docs/utilities/render)
utility.
[Resend\
------\
\
Send email using Resend](https://react.email/docs/integrations/resend)
[Nodemailer\
----------\
\
Send email using Nodemailer](https://react.email/docs/integrations/nodemailer)
[SendGrid\
--------\
\
Send email using SendGrid](https://react.email/docs/integrations/sendgrid)
[Postmark\
--------\
\
Send email using Postmark](https://react.email/docs/integrations/postmark)
[AWS SES\
-------\
\
Send email using AWS SES](https://react.email/docs/integrations/aws-ses)
[MailerSend\
----------\
\
Send email using MailerSend](https://react.email/docs/integrations/mailersend)
[Scaleway\
--------\
\
Send email using Scaleway](https://react.email/docs/integrations/scaleway)
[Plunk\
-----\
\
Send email using Plunk](https://react.email/docs/integrations/plunk)
[](https://react.email/docs/introduction#support)
Support
-------------------------------------------------------------
All components were tested using the most popular email clients.
Gmail
Apple Mail
Outlook
Yahoo! Mail
HEY
Superhuman
[](https://react.email/docs/introduction#authors)
Authors
-------------------------------------------------------------
* Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)
)
* Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)
)
[Changelog](https://react.email/docs/changelog)
⌘I
---
# Roadmap - React Email
[Skip to main content](https://react.email/docs/roadmap#content-area)
[React Email home page](https://react.email/docs)
Search...
⌘K
Search...
Navigation
Overview
Roadmap
On this page
* [Planned Features](https://react.email/docs/roadmap#planned-features)
* [VS Code extension](https://react.email/docs/roadmap#vs-code-extension)
If any of these are important to you please let us know. We use community feedback to plan our roadmap, and we also encourage contributors to submit their ideas on [GitHub Discussions](https://github.com/resend/react-email/discussions)
so that we can discuss them with the community. Feel free to contribute to any of them as well.
[](https://react.email/docs/roadmap#planned-features)
Planned Features
--------------------------------------------------------------------------
These are the features that we’ve planned to work on in the near future.
###
[](https://react.email/docs/roadmap#vs-code-extension)
VS Code extension
Build a VS Code extension where developers can build the email using React on one side and see a live preview right next to it.
* [GitHub Discussion #574](https://github.com/resend/react-email/discussions/574)
[Changelog](https://react.email/docs/changelog)
[CLI](https://react.email/docs/cli)
⌘I
---
# CLI - React Email
[Skip to main content](https://react.email/docs/cli#content-area)
[React Email home page](https://react.email/docs)
Search...
⌘K
Search...
Navigation
Overview
CLI
On this page
* [email dev](https://react.email/docs/cli#email-dev)
* [email build](https://react.email/docs/cli#email-build)
* [email start](https://react.email/docs/cli#email-start)
* [email export](https://react.email/docs/cli#email-export)
* [email help ](https://react.email/docs/cli#email-help-%3Ccmd%3E)
* [email resend setup](https://react.email/docs/cli#email-resend-setup)
* [email resend reset](https://react.email/docs/cli#email-resend-reset)
[](https://react.email/docs/cli#email-dev)
`email dev`
----------------------------------------------------------
Starts a local development server that will watch your files and automatically rebuild your email template when you make changes. **Options**
[](https://react.email/docs/cli#param-dir)
\--dir
string
default:"emails"
Change the directory of your email templates.
[](https://react.email/docs/cli#param-port)
\--port
string
default:"3000"
Port to run dev server on
**F.A.Q**
Where can I place my static files for previewing?
Almost always you will need to have static files in your emails, and seeing them on the preview server without having to first host on a CDN is very helpful.We do allow for this, and currently, you can place your files inside a `static` directory inside your `emails` directory.This does adjust to your `--dir` option, so if your `emails` directory was inside `./src/emails`, you would place your static files inside `./src/emails/static`.These static files are directly served from our preview server by looking into the requests made into it that end with `/static` (i.e. `http://localhost:3000/static/...`) and serving the files at that point, this also allows for you to have images inside your emails like so:
Copy
export default function Email(props) {
return (
);
}
This does not mean your images are hosted for you to send the emails.If you do send the rendered email, and you are trying to link to an image, or some other asset inside `emails/static`, they will not load on the email that was sent.We recommend that you use a different source link to your files depending on whether you’re running in production or not. Here’s an example
Copy
const baseURL = process.env.NODE_ENV === "production" ? "https://cdn.com" : "";
export default function Email(props) {
return (
);
}
You can refer to our [demo emails source code](https://demo.react.email/preview/notifications/vercel-invite-user)
for an example of how we do this with our demo deploy on Vercel.
How can I define props specific to the email's preview?
Considering that you are already default exporting the React component that will render as your email template, you can just define a `PreviewProps` with it as follows:
Email template
Copy
export default function Email(props) {
return (
);
}
Email.PreviewProps = {
source: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
};
And then, when opening this email’s preview, the `PreviewProps` will be used as props into Email. So, in a nutshell, it will render the same as if you were to do:
Another file
Copy
import Email from "./path-to-my-email";
;
How to make the preview server ignore directories?
Once the preview server has started and is now open on `localhost`, the preview server reads recursively down into all of your files and directories. This can be disabled from a directory down by prefixing it with `_`, e.g. `components -> _components`.So if you wanted to make components for your emails, you could have a file structure as follows:
Copy
my-project
├── emails
│ ├── _components
│ │ └── this-is-not-going-to-appear-in-the-sidebar.tsx
│ ├── email.tsx
│ └── static
├── package.json
└── tsconfig.json
Then the only file that will be shown on the preview server is going to be your `email.tsx`.
The heuristics for files to be considered emails
To avoid uncanny files appearing in the sidebar of the preview server, we account for two heuristics to determine weather or not we should include it:
1. If a file has `.js, .jsx or .tsx` as their file extension
2. If the file contains a `export default` expression by matching with the regex
`/\bexport\s*default\b/gm`
These can certainly fail as they are only heuristics, so if you do find any issues with these, feel free to open an [issue](https://github.com/resend/react-email/issues)
.
[](https://react.email/docs/cli#email-build)
`email build`
--------------------------------------------------------------
Copies the preview app for onto `.react-email` and builds it.
[](https://react.email/docs/cli#param-dir-1)
\--dir
string
default:"emails"
Change the directory of your email templates.
[](https://react.email/docs/cli#param-package-manager)
\--packageManager
string
default:"npm"
Package manager to use on the installation of `.react-email`.
[](https://react.email/docs/cli#email-start)
`email start`
--------------------------------------------------------------
Runs the built preview app that is inside `.react-email`.
[](https://react.email/docs/cli#email-export)
`email export`
----------------------------------------------------------------
Generates the plain HTML files of your emails into a `out` directory.
A very common misconception is to assume that `email export` is the default or primary way of rendering email templates.The primary and preferable way is always going to be the [render](https://react.email/docs/utilities/render)
utility, by passing in the needed data through props, on the exact moment of sending the email.`email export` is a secondary way meant for situations where React Email cannot be used optimally. With this secondary way, comes significant drawbacks, mainly the need for manual templating, which could be done easily with the `render` utility. It being a secondary way, we would strongly recommend you don’t use it unless you really are forced into it.As an example, two cases where `email export` makes itself necessary include:
* When the email content must be processed by a backend in a language other than JavaScript.
* When the platform handling email, such as Shopify, forces you into manual templating.
You also should not have to worry about `render`’s performance, as typically, the introduced time in rendering is going to be milliseconds when compared to manual templating.
**Options**
[](https://react.email/docs/cli#param-out-dir)
\--outDir
string
default:"out"
Change the output directory.
[](https://react.email/docs/cli#param-pretty)
\--pretty
boolean
default:"false"
Minify or prettify the generated HTML file.
[](https://react.email/docs/cli#param-plain-text)
\--plainText
boolean
default:"false"
Set output format as plain text.
[](https://react.email/docs/cli#param-dir-2)
\--dir
string
default:"emails"
Change the directory of your email templates.
[](https://react.email/docs/cli#email-help-%3Ccmd%3E)
`email help `
----------------------------------------------------------------------------
Shows all the options for a specific command.
[](https://react.email/docs/cli#email-resend-setup)
`email resend setup`
----------------------------------------------------------------------------
Sets up a configuration in your home directory with your Resend API Key by prompting interactively.
[](https://react.email/docs/cli#email-resend-reset)
`email resend reset`
----------------------------------------------------------------------------
Removes your API Key from the configuration in your home directory.
[Roadmap](https://react.email/docs/roadmap)
[Deployment](https://react.email/docs/deployment)
⌘I
---
# Deployment - React Email
[Skip to main content](https://react.email/docs/deployment#content-area)
[React Email home page](https://react.email/docs)
Search...
⌘K
Search...
Navigation
Overview
Deployment
1
Add 'build' script to ./package.json
Copy
{
"scripts": {
+ "build": "email build"
}
}
2
Change 'Framework Preset' on Vercel's project settings to Next.js
You also need to add “next” on `devDependencies` to work properly:
Copy
{
"devDependencies": {
+ "next": "*",
}
}
This is a limitation on Vercel’s Next Framework Preset.
3
Change 'Output Directory' to .react-email/.next
In the end, your settings should look like this:
[CLI](https://react.email/docs/cli)
[Automatic Setup](https://react.email/docs/getting-started/automatic-setup)
⌘I
---
# Updating React Email - React Email
[Skip to main content](https://react.email/docs/getting-started/updating-react-email#content-area)
[React Email home page](https://react.email/docs)
Search...
⌘K
Search...
Navigation
Getting Started
Updating React Email
On this page
* [Update from React Email 4.0 to 5.0](https://react.email/docs/getting-started/updating-react-email#update-from-react-email-4-0-to-5-0)
* [Tailwind 4](https://react.email/docs/getting-started/updating-react-email#tailwind-4)
[](https://react.email/docs/getting-started/updating-react-email#update-from-react-email-4-0-to-5-0)
Update from React Email 4.0 to 5.0
-------------------------------------------------------------------------------------------------------------------------------------------
1. Update your React Email packages: `npm install @react-email/components@latest react-email@latest`.
2. Replace all `renderAsync` uses with `render`.
Make sure you update `@react-email/components` alongside `react-email`. The compatibility checker now only supports Tailwind 4, so you need to update both in sync.
###
[](https://react.email/docs/getting-started/updating-react-email#tailwind-4)
Tailwind 4
This update includes Tailwind 4 via `@react-email/components@latest`. Some utilities have changed since Tailwind 3—review their [upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3)
to adjust your code if needed. Tailwind 4 also changes how classes are handled in components. Previously, passing `className` added an equivalent inlined `style` prop, which caused confusion and performance issues. Now, styles are only inlined on elements, not components. If you were merging utilities with the `style` prop, consider using [tailwind-merge](https://github.com/dcastil/tailwind-merge)
instead. The configuration remains in the `config` prop.
[Migrating to React Email](https://react.email/docs/getting-started/migrating-to-react-email)
[HTML](https://react.email/docs/components/html)
⌘I
---
# Changelog - React Email
[Skip to main content](https://react.email/docs/changelog#content-area)
[React Email home page](https://react.email/docs)
Search...
⌘K
Search...
Navigation
Overview
Changelog
On this page
* [November 7, 2025](https://react.email/docs/changelog#november-7%2C-2025)
* [October 24, 2025](https://react.email/docs/changelog#october-24%2C-2025)
* [October 17, 2025](https://react.email/docs/changelog#october-17%2C-2025)
* [October 6, 2025](https://react.email/docs/changelog#october-6%2C-2025)
* [September 26, 2025](https://react.email/docs/changelog#september-26%2C-2025)
* [September 24, 2025](https://react.email/docs/changelog#september-24%2C-2025)
* [September 23, 2025](https://react.email/docs/changelog#september-23%2C-2025)
* [September 9, 2025](https://react.email/docs/changelog#september-9%2C-2025)
* [September 8, 2025](https://react.email/docs/changelog#september-8%2C-2025)
* [September 5, 2025](https://react.email/docs/changelog#september-5%2C-2025)
* [August 20, 2025](https://react.email/docs/changelog#august-20%2C-2025)
* [August 6, 2025](https://react.email/docs/changelog#august-6%2C-2025)
* [August 5, 2025](https://react.email/docs/changelog#august-5%2C-2025)
* [August 1, 2025](https://react.email/docs/changelog#august-1%2C-2025)
* [July 31, 2025](https://react.email/docs/changelog#july-31%2C-2025)
* [July 30, 2025](https://react.email/docs/changelog#july-30%2C-2025)
* [July 29, 2025](https://react.email/docs/changelog#july-29%2C-2025)
* [July 23, 2025](https://react.email/docs/changelog#july-23%2C-2025)
* [July 18, 2025](https://react.email/docs/changelog#july-18%2C-2025)
* [July 17, 2025](https://react.email/docs/changelog#july-17%2C-2025)
* [July 16, 2025](https://react.email/docs/changelog#july-16%2C-2025)
* [July 15, 2025](https://react.email/docs/changelog#july-15%2C-2025)
* [July 11, 2025](https://react.email/docs/changelog#july-11%2C-2025)
* [July 10, 2025](https://react.email/docs/changelog#july-10%2C-2025)
* [July 08, 2025](https://react.email/docs/changelog#july-08%2C-2025)
* [June 24, 2025](https://react.email/docs/changelog#june-24%2C-2025)
* [June 16, 2025](https://react.email/docs/changelog#june-16%2C-2025)
* [June 10, 2025](https://react.email/docs/changelog#june-10%2C-2025)
* [June 03, 2025](https://react.email/docs/changelog#june-03%2C-2025)
* [May 19, 2025](https://react.email/docs/changelog#may-19%2C-2025)
* [May 16, 2025](https://react.email/docs/changelog#may-16%2C-2025)
* [May 13, 2025](https://react.email/docs/changelog#may-13%2C-2025)
* [May 12, 2025](https://react.email/docs/changelog#may-12%2C-2025)
* [May 9, 2025](https://react.email/docs/changelog#may-9%2C-2025)
* [May 2, 2025](https://react.email/docs/changelog#may-2%2C-2025)
* [May 1, 2025](https://react.email/docs/changelog#may-1%2C-2025)
* [Apr 09, 2025](https://react.email/docs/changelog#apr-09%2C-2025)
* [Apr 08, 2025](https://react.email/docs/changelog#apr-08%2C-2025)
* [Apr 04, 2025](https://react.email/docs/changelog#apr-04%2C-2025)
* [Apr 01, 2025](https://react.email/docs/changelog#apr-01%2C-2025)
* [Mar 28, 2025](https://react.email/docs/changelog#mar-28%2C-2025)
* [Mar 27, 2025](https://react.email/docs/changelog#mar-27%2C-2025)
* [Mar 17, 2025](https://react.email/docs/changelog#mar-17%2C-2025)
* [Feb 10, 2025](https://react.email/docs/changelog#feb-10%2C-2025)
* [Jan 09, 2025](https://react.email/docs/changelog#jan-09%2C-2025)
* [Jan 07, 2025](https://react.email/docs/changelog#jan-07%2C-2025)
* [Dec 10, 2024](https://react.email/docs/changelog#dec-10%2C-2024)
* [Dec 09, 2024](https://react.email/docs/changelog#dec-09%2C-2024)
* [Dec 06, 2024](https://react.email/docs/changelog#dec-06%2C-2024)
* [Dec 03, 2024](https://react.email/docs/changelog#dec-03%2C-2024)
* [Nov 08, 2024](https://react.email/docs/changelog#nov-08%2C-2024)
* [Nov 04, 2024](https://react.email/docs/changelog#nov-04%2C-2024)
* [Oct 31, 2024](https://react.email/docs/changelog#oct-31%2C-2024)
* [Sep 02, 2024](https://react.email/docs/changelog#sep-02%2C-2024)
* [Aug 23, 2024](https://react.email/docs/changelog#aug-23%2C-2024)
* [Aug 22, 2024](https://react.email/docs/changelog#aug-22%2C-2024)
* [Jul 23, 2024](https://react.email/docs/changelog#jul-23%2C-2024)
* [Jul 3, 2024](https://react.email/docs/changelog#jul-3%2C-2024)
* [Jul 1, 2024](https://react.email/docs/changelog#jul-1%2C-2024)
* [May 24, 2024](https://react.email/docs/changelog#may-24%2C-2024)
* [May 20, 2024](https://react.email/docs/changelog#may-20%2C-2024)
* [Apr 29, 2024](https://react.email/docs/changelog#apr-29%2C-2024)
* [Mar 28, 2024](https://react.email/docs/changelog#mar-28%2C-2024)
* [Feb 22, 2024](https://react.email/docs/changelog#feb-22%2C-2024)
* [Jan 19, 2024](https://react.email/docs/changelog#jan-19%2C-2024)
* [Jan 16, 2024](https://react.email/docs/changelog#jan-16%2C-2024)
* [Dec 11, 2023](https://react.email/docs/changelog#dec-11%2C-2023)
* [Dec 01, 2023](https://react.email/docs/changelog#dec-01%2C-2023)
* [Nov 01, 2023](https://react.email/docs/changelog#nov-01%2C-2023)
* [April 05. 2023](https://react.email/docs/changelog#april-05-2023)
* [March 21, 2023](https://react.email/docs/changelog#march-21%2C-2023)
* [January 24, 2023](https://react.email/docs/changelog#january-24%2C-2023)
* [January 4, 2023](https://react.email/docs/changelog#january-4%2C-2023)
* [December 28, 2022](https://react.email/docs/changelog#december-28%2C-2022)
* [December 22, 2022](https://react.email/docs/changelog#december-22%2C-2022)
* [December 21, 2022](https://react.email/docs/changelog#december-21%2C-2022)
* [December 16, 2022](https://react.email/docs/changelog#december-16%2C-2022)
* [December 12, 2022](https://react.email/docs/changelog#december-12%2C-2022)
* [December 8, 2022](https://react.email/docs/changelog#december-8%2C-2022)
* [December 3, 2022](https://react.email/docs/changelog#december-3%2C-2022)
* [November 29, 2022](https://react.email/docs/changelog#november-29%2C-2022)
* [November 17, 2022](https://react.email/docs/changelog#november-17%2C-2022)
* [November 6, 2022](https://react.email/docs/changelog#november-6%2C-2022)
* [October 13, 2022](https://react.email/docs/changelog#october-13%2C-2022)
* [October 12, 2022](https://react.email/docs/changelog#october-12%2C-2022)
* [October 1, 2022](https://react.email/docs/changelog#october-1%2C-2022)
* [September 26, 2022](https://react.email/docs/changelog#september-26%2C-2022)
* [September 24, 2022](https://react.email/docs/changelog#september-24%2C-2022)
* [September 23, 2022](https://react.email/docs/changelog#september-23%2C-2022)
* [September 22, 2022](https://react.email/docs/changelog#september-22%2C-2022)
[](https://react.email/docs/changelog#november-7,-2025)
November 7, 2025
----------------------------------------------------------------------------
**React Email 5.0.0**
* Dark mode switcher emulating email client color inversion
* improved integration setup flow
* fallback to not text coloring for Node.js < 20
See [the migration guide](https://react.email/docs/getting-started/updating-react-email)
**Preview Server 5.0.0**
* Integrate with Templates API so users can easily turn React Email templates into actual Resend templates
* Dark mode switcher emulating email client color inversion
* only check compatibility with tailwindcss@4
* improve color inversion code, don’t remount iframe
* advise `npx` to run email setup command
* fix compatibility checking not working with inline object styles, and not working on properties such as `justifyContent`/`justify-content`
* improve reading flow for resend integration setup instructions
* show separate timings for bundling/rendering an email template
* darken the canvas background when dark mode is enabled
* ui improvements
* reduce margins bellow buttons
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
**Components 1.0.0**
* tailwind: update to using tailwindcss@v4
* code-block: deal with spark mail’s compatibility issues
* body: reset the `margin` property in the `` when it has a user definition
* markdown: fix nested lists not working
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
**Tailwind 2.0.0**
* update to using tailwindcss@v4, don’t inline styles on component props anymore
* export granular APIs in a more tree shakeable way
* expose `setupTailwind`, `sanitizeDeclarations` and `inlineStyles` for use in the preview server
**Render 2.0.0**
* Removes deprecated `renderAsync`
* Remove unused `react-promise-suspense`
**Code Block 0.2.0**
* deal with spark mail’s compatibility issues
**Body 0.2.0**
* reset the `margin` property in the `` when it has a user definition
**Button 0.2.0**
* respect the order in which padding properties are defined
**Markdown 0.0.17**
* fix nested lists not working
[](https://react.email/docs/changelog#october-24,-2025)
October 24, 2025
----------------------------------------------------------------------------
**React Email 4.3.2** **Preview Server 4.3.2**
* fix imports of files with implicit extensions, and secondary segment like `.spec` failing to hot reload
[](https://react.email/docs/changelog#october-17,-2025)
October 17, 2025
----------------------------------------------------------------------------
**React Email 4.3.1**
* hot reloading errors when importing .json and other file extensions
**Preview Server 4.3.1**
* make everything in the global for the UI available to email contexts using a Proxy
**Render 1.4.0**
* disable wordwrap in toPlainText by default
**Markdown 0.0.16**
* move out of md-to-react-email
**Components 0.5.7**
* markdown: move out of md-to-react-email
* render: disable wordwrap in toPlainText by default
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#october-6,-2025)
October 6, 2025
--------------------------------------------------------------------------
**React Email 4.3.0** **Preview Server 4.3.0**
* Added resize snapping, refined UI and improved presets
[](https://react.email/docs/changelog#september-26,-2025)
September 26, 2025
--------------------------------------------------------------------------------
**React Email 4.2.12**
* Normalize Windows paths in generated Next.js config
[](https://react.email/docs/changelog#september-24,-2025)
September 24, 2025
--------------------------------------------------------------------------------
**Render 1.3.1**
* fixed multi-byte characters causing problems during stream reading
**Components 0.5.5**
* render: fixed multi-byte characters causing problems during stream reading
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#september-23,-2025)
September 23, 2025
--------------------------------------------------------------------------------
**Render 1.3.0**
* fix link duplication in plain text mode
**Components 0.5.4**
* render: fix link duplication in plain text mode
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#september-9,-2025)
September 9, 2025
------------------------------------------------------------------------------
**React Email 4.2.11** **Preview Server 4.2.11**
* fix data-source-\* attributes in the html code view
**React Email 4.2.10** **Preview Server 4.2.10**
* Update nextjs to 15.5.2
**Render 1.2.3**
* use edge exports in convex runtime
**Components 0.5.3**
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#september-8,-2025)
September 8, 2025
------------------------------------------------------------------------------
**React Email 4.2.9** **Preview Server 4.2.9**
* use `styleText` from `node:util` instead of `chalk`
[](https://react.email/docs/changelog#september-5,-2025)
September 5, 2025
------------------------------------------------------------------------------
**Render 1.2.2**
* fix builds failing with esbuild and react-dom@18
**Components 0.5.2**
* render: fix builds failing with esbuild and react-dom@18
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#august-20,-2025)
August 20, 2025
--------------------------------------------------------------------------
**Render 1.2.1**
* fix MessageChannel errors on edge environments
**Components 0.5.1**
* render: add toPlainText utility and deprecate plainText option on `render`
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#august-6,-2025)
August 6, 2025
------------------------------------------------------------------------
**Render 1.2.0**
* add toPlainText utility and deprecate plainText option on `render`
**Components 0.5.0**
* render: add toPlainText utility and deprecate plainText option on render
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#august-5,-2025)
August 5, 2025
------------------------------------------------------------------------
**React Email 4.2.8**
* fix hot reloading with circular dependencies
[](https://react.email/docs/changelog#august-1,-2025)
August 1, 2025
------------------------------------------------------------------------
**React Email 4.2.7** **Preview Server 4.2.7**
* fix broken file tree animation on built preview server
[](https://react.email/docs/changelog#july-31,-2025)
July 31, 2025
----------------------------------------------------------------------
**React Email 4.2.6** **Preview Server 4.2.6**
* d3cc64d: use unformmated markup to send emails, and to render into the iframe
**Components 0.4.0**
* body: apply all styles of the body to an inner table cell for them to work on Yahoo and AOL
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
**Body 0.1.0**
* apply all styles of the body to an inner table cell for them to work on Yahoo and AOL
[](https://react.email/docs/changelog#july-30,-2025)
July 30, 2025
----------------------------------------------------------------------
**Render 1.1.4**
* fix hydration markers on React canary/Next.js latest when rendering large email templates
**Components 0.3.3**
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#july-29,-2025)
July 29, 2025
----------------------------------------------------------------------
**React Email 4.2.5**
* fix errors in `export` when without manual React import
[](https://react.email/docs/changelog#july-23,-2025)
July 23, 2025
----------------------------------------------------------------------
**React Email 4.2.4** **Preview Server 4.2.4**
* fix custom JSX runtime trying to be run as ESM on ESM projects
[](https://react.email/docs/changelog#july-18,-2025)
July 18, 2025
----------------------------------------------------------------------
**Tailwind 1.2.2**
* Add a warning when using safelist and force it to change no behavior
**Components 0.3.2**
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#july-17,-2025)
July 17, 2025
----------------------------------------------------------------------
**React Email 4.2.3**
* fix files with extension-like suffixes (i.e. config, .spec) breaking dependency graph
**React Email 4.2.2**
* dev server erroring when trying to startup with port already being used
[](https://react.email/docs/changelog#july-16,-2025)
July 16, 2025
----------------------------------------------------------------------
**React Email 4.2.1** **Preview Server 4.2.1**
* pin all dependencies to avoid compatibility issues of the built preview server
[](https://react.email/docs/changelog#july-15,-2025)
July 15, 2025
----------------------------------------------------------------------
**React Email 4.2.0** **Preview Server 4.2.0**
* add custom error handling for prettier’s syntax errors
[](https://react.email/docs/changelog#july-11,-2025)
July 11, 2025
----------------------------------------------------------------------
**Tailwind 1.2.1**
* fix color-scheme media queries sometimes not getting sanitized at the className
**Tailwind 1.2.0**
* add pixelBasedPreset export directly
**Preview Server 4.1.3**
* improved method of resolving tailwind configs when checking compatibility
**Preview Server 4.1.2**
* fix rendering utilities exporter plugin not running for symlinks
**Components 0.3.1**
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
**Components 0.3.0**
* tailwind: add pixelBasedPreset export directly
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
[](https://react.email/docs/changelog#july-10,-2025)
July 10, 2025
----------------------------------------------------------------------
**React Email 4.1.1**
* fix path resolution done wrong breaking `email-dev` on Windows
[](https://react.email/docs/changelog#july-08,-2025)
July 08, 2025
----------------------------------------------------------------------
**React Email 4.1.0**
* use a separate package for storing the preview server (@react-email/preview-server)
* Use the same version for the preview-server and react-email
**Preview Server 4.1.0**
* Use the same version for the preview-server and react-email
* fix range rounded borders, tearing when selecting different lines
* infinite fetches due to improper effect dependency
**Components 0.2.0**
* tailwind: Extract tailwind pseudo classes to stylesheet
* button: respect the order in which padding properties are defined
* Updated dependencies
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
* @react-email/[\[email protected\]](https://react.email/cdn-cgi/l/email-protection)
**Button 0.2.0**
* respect the order in which padding properties are defined
**Tailwind 1.1.0**
* Extract tailwind pseudo classes to stylesheet
[](https://react.email/docs/changelog#june-24,-2025)
June 24, 2025
----------------------------------------------------------------------
**React Email 4.0.17**
* fix `
