Email Templates

The React Email project is makes it easy to create email templates. It includes unstyled components and the Tailwind CSS support.

Installation

Install the React Email components to your project by running the following command in the Terminal:

pnpm add @react-email/components

This assumes that you’ve already installed Resend to your project. If not, you can install the React Email components and Resend in one go:

pnpm add @react-email/components resend

Then, install the React Email Preview:

npx create-email@latest

This will create a new directory called react-email-starter.

cd react-email-starter
pnpm install
pnpm dev

Now, you can open a browser at http://localhost:3000 and see the preview.

In the left sidebar, you’ll notice that React Email has 4 email examples you can preview. These correspond with the .tsx files inside the react-email-starter/emails directory:

All the assets for these example emails are within the react-email-starter/emails/static directory.

You can delete all the contents inside the emails directory. Or, oftentimes, I’ll create a sub directory called archive and move the contents there.

Creating a New Email Template

Create a new file in the emails directory with a .tsx extension.
Inside your email file, paste the following code:
src/emails/welcome-email.tsx
```
1
import {
2
  Body,
3
  Container,
4
  Head,
5
  Heading,
6
  Html,
7
  Preview,
8
} from "@react-email/components";
9

10
export default function WelcomeEmail() {
11
  <Html>
12
    <Head />
13
    <Preview>Hello World</Preview>
14
    <Body>
15
      <Container>
16
        <Heading>Hello World</Heading>
17
      </Container>
18
    </Body>
19
  </Html>
20
);
```
Your React Email component must be a default export in order for the browser preview to pick it up.

You’ll notice that React Email has several primitives, making it easy to create a new email template.

You can see a full list of components on the React Email documentation.

React Email also has several prebuilt components for galleries, e-commerce, articles, etc.

Adjust the template to your liking.

Keep in mind that you can pass in props, personalizing the template and making it more dynamic.

10
interface WelcomeEmailProps {
11
  name: string;
12
}
13

14
export default function WelcomeEmail({ name }: WelcomeEmailProps) {
15
  <Html>
16
    <Head />
17
    <Preview>Hello {name}</Preview>
18
    <Body>
19
      <Container>
20
        <Heading>Hello {name}</Heading>
21
      </Container>
22
    </Body>
23
  </Html>
24
);

When you’ve finished building the email template, you can get the code by clicking on the Code button in the browser preview.

From here, you download or copy and paste the React code, HTML, or Plain Text into your project.

Create a new folder inside the src/app directory called emails and paste the React Email code into the new file.
- Directorysrc/
  - Directoryapp/
    Directoryemails/
    WelcomeEmail.tsx

Updating your Resend Code:

Now, you can update your Resend code (pulled from the example on Sending Email page) to use the new email template.

1
import WelcomeEmail from "@/app/emails/WelcomeEmail";
2

3
const { data, error } = await resend.emails.send({
4
  from: "Acme <[email protected]>",
5
  to: email,
6
  subject: "👋 Hello World",
7
  react: <WelcomeEmail name="Amy" />,
8
});

Using Tailwind within Email Templates

import the Tailwind component at the top of your email template:
src/emails/WelcomeEmail.tsx
```
1
import { Tailwind } from "@react-email/components";
```
Wrap your email template in the Tailwind component:
src/emails/WelcomeEmail.tsx
```
<Tailwind>
  <Html>
    <Head />
    <Preview>Hello World</Preview>
  </Html>
</Tailwind>
```
React Email uses the 3.4.10 version of Tailwind CSS.
If you want to use a custom theme, this will need to be defined as a config prop, passed into the Tailwind component.
src/emails/WelcomeEmail.tsx
```
<Tailwind
  config={{
    theme: {
      extend: {
        colors: {
          brand: "#007291",
        },
      },
    },
  }}
>
...
```
If you go this route, we recommend putting the config prop in a separate file, importing it into your email template, and passing it into the Tailwind component.
src/emails/tailwind.config.ts
```
1
export default {
2
  theme: {
3
    extend: {
4
    }
5
  }
6
}
```
src/emails/WelcomeEmail.tsx
```
1
import tailwindConfig from "./tailwind.config";
2

3
<Tailwind config={tailwindConfig} />
```