> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setting up for yarn workspaces

> Configure React Email on a yarn monorepo

<Note>
  This is a guide intended at users of [yarn modern](https://yarnpkg.com/getting-started/qa#why-should-you-upgrade-to-yarn-modern).
  For those who are using [yarn classic](https://www.npmjs.com/package/yarn) (`1.x`), you can do something similar to the
  [pnpm guide](/getting-started/monorepo-setup/pnpm).
</Note>

## 1. Create transactional 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`.

<Card title="React Email + Turborepo + yarn example" icon="arrow-up-right-from-square" href="https://github.com/resend/react-email-turborepo-yarn-example">
  See the full source code
</Card>

## 2. Set linker either to `node-modules` or to `pnpm`

Currently, React Email can only work with yarn's `node-modules` and `pnpm` [install modes](https://yarnpkg.com/features/linkers)
so you will need to set it to one of these two on your `.yarnrc.yml` file:

```yml .yarnrc.yml theme={"theme":{"light":"github-light","dark":"vesper"}}
nodeLinker: node-modules
```

## 3. Install dependencies

Install React Email in the `transactional` workspace.

```sh packages/transactional theme={"theme":{"light":"github-light","dark":"vesper"}}
yarn add @react-email/ui -D -E
yarn add react-email react react-dom -E
```

## 4. Add scripts

Include the following script in your `package.json` file.

```json packages/transactional/package.json theme={"theme":{"light":"github-light","dark":"vesper"}}
{
  // ...
  "scripts": {
    "dev": "email dev"
  }
  // ...
}
```

## 5. Write your emails

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

```jsx packages/transactional/emails/email.tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { Button, Html, Head, Body } from "react-email";
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>
  );
}
```

## 6. Run preview server

Start the email previews development server:

```sh packages/transactional theme={"theme":{"light":"github-light","dark":"vesper"}}
yarn dev
```

## 7. See changes live

Visit [localhost:3000](http://localhost:3000) and edit the `emails/email.tsx` file to see the changes.

<Frame>
  <img alt="Local Development" src="https://mintcdn.com/react-email/6RLPyy-TJtRfD3cU/images/manual-setup-dev.png?fit=max&auto=format&n=6RLPyy-TJtRfD3cU&q=85&s=1e1054377b1c05089231df85d9bb7f51" width="3840" height="2500" data-path="images/manual-setup-dev.png" />
</Frame>

## 8. Try it yourself

<Card title="React Email + Turborepo + yarn example" icon="arrow-up-right-from-square" href="https://github.com/resend/react-email-turborepo-yarn-example">
  See the full source code
</Card>
