> ## 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.

# Manual Setup

> Create a brand-new folder with packages powered by React Email.

> [!NOTE]
>
> Are you using monorepos? Then we recommend you follow our [monorepos setup](https://react.email/docs/getting-started/monorepo-setup/choose-package-manager).

## 1. Install dependencies

Install the React Email packages locally.

```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
npm install @react-email/ui -D -E
npm install react-email react react-dom -E
```

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

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

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

## 2. Add scripts

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

```json package.json theme={"theme":{"light":"github-light","dark":"vesper"}}
{
  "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 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>
  );
}
```

## 4. Run locally

Start the development server.

```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
npm run email:dev
```

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

```sh pnpm theme={"theme":{"light":"github-light","dark":"vesper"}}
pnpm email:dev
```

```sh bun theme={"theme":{"light":"github-light","dark":"vesper"}}
bun email:dev
```

## 5. See changes live

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

![Local Development](https://mintcdn.com/react-email/6RLPyy-TJtRfD3cU/images/manual-setup-dev.png?fit=max\&auto=format\&n=6RLPyy-TJtRfD3cU\&q=85\&s=1e1054377b1c05089231df85d9bb7f51)

## 6. Next steps

Try adding these other components to your email.

> **[Image](https://react.email/docs/components/image.md)**
>
> Display an image in your email.

> **[Link](https://react.email/docs/components/link.md)**
>
> A hyperlink to web pages or anything else a URL can address.

> **[Divider](https://react.email/docs/components/hr.md)**
>
> Display a divider that separates content areas in your email.

> **[Preview](https://react.email/docs/components/preview.md)**
>
> A preview text that will be displayed in the inbox of the recipient.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.