Manual Setup - React Email

import NextSteps from '/snippets/next-steps.mdx'

<Note>Are you using monorepos? Then we recommend you follow our monorepos setup.</Note>

1. Install dependencies

Install the React Email package locally and a few components.

npm install react-email @react-email/preview-server -D -E
npm install @react-email/components react react-dom -E

yarn add react-email @react-email/preview-server -D -E
yarn add @react-email/components react react-dom -E

pnpm add react-email @react-email/preview-server -D -E
pnpm add @react-email/components react react-dom -E

bun add react-email @react-email/preview-server -D -E
bun add @react-email/components react react-dom -E

</CodeGroup>

2. Add scripts

Include the following script in your package.json file.

json

{
  "scripts": {
    "email:dev": "email dev"
  }
}

3. Write an email template

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

jsx

import { Button, Html, Head, Body } from "@react-email/components";
import * as React from "react";

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

4. Run locally

Start the development server.

npm run email:dev

yarn email:dev

pnpm email:dev

bun email:dev

</CodeGroup>

5. See changes live

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

6. Next steps