​
1. Create workspace

Create a new folder called transactional inside of where you keep workspace packages (generally ./packages/*).

Include a new package.json and do not forget to add this to the workspaces of your monorepo’s package.json.

React Email + Turborepo + bun example

See the full source code

​
2. Install dependencies

Install React Email to the transactional workspace.

packages/transactional
bun add react-email -D -E
bun add @react-email/components react react-dom -E

​
3. Add scripts

Include the following script in your package.json file.

packages/transactional/package.json
{
  // ...
  "scripts": {
    "dev": "email dev"
  }
  // ...
}

​
4. Write your emails

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

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

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

export default MyEmail;

​
5. Run preview server

Start the email previews development server:

packages/transactional
bun dev

​
6. See changes live

Visit localhost:3000 and edit the emails/MyEmail.tsx file to see the changes.

​
7. Try it yourself

React Email + Turborepo + bun example

See the full source code

yarnMigrating to React Email