Are you using monorepos? Then we recommend you follow our monorepos setup.

​
1. Create directory

Create a new folder called react-email-starter and initialize a new npm project:

mkdir react-email-starter
cd react-email-starter
npm init

​
2. Install dependencies

Install the React Email package locally and a few components.

​
3. Add scripts

Include the following script in your package.json file.

package.json
{
  "scripts": {
    "dev": "email dev"
  }
}

​
4. Write an email template

Create a new folder called emails, create a file inside called my-email.tsx, and add the following code:

emails/my-email.tsx
import { Button, Html } from "@react-email/components";
import * as React from "react";

export default function Email() {
  return (
    <Html>
      <Button
        href="https://example.com"
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
      >
        Click me
      </Button>
    </Html>
  );
}

​
5. Run locally

Start the development server.

​
6. See changes live

Visit localhost:3000 and edit the index.tsx file to see the changes.

​
7. Next steps

Try adding these other components to your email.

Image

Display an image in your email.

Link

A hyperlink to web pages or anything else a URL can address.

Divider

Display a divider that separates content areas in your email.

Preview

A preview text that will be displayed in the inbox of the recipient.

Automatic Setupnpm