---
title: "React Email 4.0"
slug: react-email-4
description: "A completely new set of tools to help you build better emails."
created_at: "2025-03-28"
updated_at: "2024-03-28"
image: https://cdn.resend.com/posts/react-email-4.jpg
humans: ["gabriel-miranda"]
featured: false
category: "product"
---

We're excited to announce [React Email 4.0](https://react.email), featuring:

- **[Linter](#linter)**
- **[Spam Score](#spam-score)**
- **[Compatibility Checker](#compatibility-checker)**
- **[Responsive Preview](#responsive-preview)**
- **[New Components](#new-components)**

<video
  src="https://cdn.resend.com/posts/react-email-4.mp4"
  poster="https://cdn.resend.com/posts/react-email-4-poster.jpg"
  controls
  controlsList="nodownload"
  className="extraWidth aspect-video"
/>


Update today and check the [upgrade instructions](#upgrade-instructions) below.

```
npm i react-email@latest
```

React Email now has **422,541 weekly downloads** on [npm](https://www.npmjs.com/package/react-email), that is a **56% increase** since the last major release 5 months ago.

We also have **15,509 stars** on [GitHub](https://github.com/resend/react-email) and would like to thank all the **154 contributors** who made this possible.

## Linter

The new Linter tool will analyze every link in your email to see if it's valid or not.

- If the links are valid and returning a `200` response status
- If the links are secure and using `HTTPS` instead of `HTTP`

<video
  src="https://cdn.resend.com/posts/react-email-4-1.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="extraWidth"
/>

It will also try to load every image in your email and recommend tips to improve it.

* If the images are optimized and no bigger than `1 MB`
* If the images are accessible and contain `alt` text

<video
  src="https://cdn.resend.com/posts/react-email-4-2.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="extraWidth"
/>

## Spam Score

The Spam Score will look at your email content and use a robust scoring framework to determine if the email is likely to be spam.

It's powered by [SpamAssassin](https://spamassassin.apache.org/), the #1 open source anti-spam platform.

Here are some of the checks it performs:

* If the email has common spam words related to pharmaceuticals, scams, or lottery.
* If the email has an unusually high number of URLs in the email body.

<video
  src="https://cdn.resend.com/posts/react-email-4-5.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="extraWidth"
/>

## Compatibility Checker

The new Compatibility Checker will see how well the HTML/CSS is supported across popular mail clients like Outlook, Apple Mail, and more.

It's powered by [Can I Email](https://www.caniemail.com), an open source repository of features and their compatibility for each email client.

There are hundreds of checks available, but here are some of the most common ones:

* If the HTML contains `<svg>` which is not supported by Gmail
* If the CSS contains `display: flex` which is not supported by Outlook

<video
  src="https://cdn.resend.com/posts/react-email-4-3.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="extraWidth"
/>

## Responsive Preview

React Email now comes with a Responsive Preview, so you can see how your email will look like on different device sizes.

There are presets for mobile and desktop, and you can also customize the width/height of the preview.

<video
  src="https://cdn.resend.com/posts/react-email-4-4.mp4"
  autoPlay
  loop
  muted
  playsInline
  className="extraWidth"
/>

## New Components

We've added 8 new components that you can copy and paste into your emails.

They include Bento Grids, Pricing Tables, Feature Lists, Ratings, and more.

* [List (2 components)](https://react.email/components/list)
* [Pricing (2 components)](https://react.email/components/pricing)
* [Marketing (1 component)](https://react.email/components/marketing)
* [Feedback (3 components)](https://react.email/components/feedback)

<img
  src="https://cdn.resend.com/posts/react-email-4-1.jpg"
  alt="New Components"
  className="extraWidth"
/>

## Upgrade instructions

Update your `react-email` package to `4.0.x`.

```sh
npm i react-email@latest
```

You can also check if you have any missing dependencies for your emails to be bundled.

## Conclusion

If you want to know all the details about this release, check the [React Email Changelog](https://react.email/docs/changelog).

If you have any problems upgrading, feel free to share on [GitHub](https://github.com/resend/react-email) or [X](https://x.com/resend).