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

# Automatic Setup

> Add React Email to any JavaScript or TypeScript project in minutes.

<Note>Using monorepos? Then, we recommend following the [monorepo setup](/getting-started/monorepo-setup/choose-package-manager).</Note>

## 1. Install

We recommend using `create-email`, which sets up everything automatically for you.

<CodeGroup>
  ```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
  npx create-email@latest
  ```

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

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

  ```sh bun theme={"theme":{"light":"github-light","dark":"vesper"}}
  bun create email
  ```
</CodeGroup>

This will create a new folder called `react-email-starter` with a few email templates.

## 2. Run locally

First, install the dependencies:

<CodeGroup>
  ```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
  npm install
  ```

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

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

  ```sh bun theme={"theme":{"light":"github-light","dark":"vesper"}}
  bun install
  ```
</CodeGroup>

Then, run the development server:

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

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

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

  ```sh bun theme={"theme":{"light":"github-light","dark":"vesper"}}
  bun dev
  ```
</CodeGroup>

## 3. See changes live

Visit [localhost:3000](http://localhost:3000) and edit any of the files on the `emails` folder to see the changes.

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

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