> ## 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](/getting-started/monorepo-setup/choose-package-manager).</Note>

## 1. Install dependencies

Install the React Email packages locally.

<CodeGroup>
  ```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
  ```
</CodeGroup>

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

<CodeGroup>
  ```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
  ```
</CodeGroup>

## 5. See changes live

Visit [localhost:3000](http://localhost:3000) and edit `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>

## 6. Next steps

Try adding these other components to your email.

<CardGroup>
  <Card title="Image" icon="image" href="/components/image">
    Display an image in your email.
  </Card>

  <Card title="Link" icon="link" href="/components/link">
    A hyperlink to web pages or anything else a URL can address.
  </Card>

  <Card title="Divider" icon="horizontal-rule" href="/components/hr">
    Display a divider that separates content areas in your email.
  </Card>

  <Card title="Preview" icon="magnifying-glass" href="/components/preview">
    A preview text that will be displayed in the inbox of the recipient.
  </Card>
</CardGroup>
