react-email

![React email cover](https://react.email/static/covers/react-email.png)

<div align="center"><strong>React Email</strong></div>
<div align="center">The next generation of writing emails.<br />High-quality, unstyled components for creating emails.</div>
<br />
<div align="center">
<a href="https://react.email">Website</a>
<span> · </span>
<a href="https://github.com/resend/react-email">GitHub</a>
</div>

## Introduction

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.

## 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 2026 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.

## Install

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

## Getting started

Define your email template with React, include styles and our components where needed.

```jsx
import { Button } from "react-email";

export default function Email() {
  return (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );
};
```

## Using with AI

Install the React Email skill to teach your coding agent (Claude Code, Codex, Cursor, GitHub Copilot, and others) how to build emails with React Email:

```sh
npx skills add resend/react-email
```

The docs are also available for LLMs at [react.email/docs/llms.txt](https://react.email/docs/llms.txt).

## Components

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](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/html)
- [Head](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/head)
- [Button](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/button)
- [Container](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/container)
- [CodeBlock](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/code-block)
- [CodeInline](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/code-inline)
- [Column](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/column)
- [Row](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/row)
- [Font](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/font)
- [Heading](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/heading)
- [Divider](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/hr)
- [Image](h