react-email

Files (7)

• SKILL.md
• TESTS.md
• COMPONENTS.md · references/
• I18N.md · references/
• PATTERNS.md · references/
• SENDING.md · references/
• STYLING.md · references/

SKILL.md (first lines)

# React Email

Build and send HTML emails using React components - a modern, component-based
approach to email development that works across all major email clients.

## Installation

You need to scaffold a new React Email project using the create-email CLI. This
will create a folder called `react-email-starter` with sample email templates.

Using npm:

```sh
npx create-email@latest
```

Using yarn:

```sh
yarn create email
```

Using pnpm:

```sh
pnpm create email
```

Using bun:

```sh
bun create email
```

## Navigate to Project Directory

You must change into the newly created project folder:

```sh
cd react-email-starter
```

## Install Dependencies

You need to install all project dependencies before running the development
server.

Using npm:

```sh
npm install
```

Using yarn:

```sh
yarn
```

Using pnpm:

```sh
pnpm install
```

Using bun:

```sh
bun install
```

## Start the Development Server

Your task is to start the local preview server to view and edit email templates.

Using npm:

```sh
npm run dev
```

Using yarn:

```sh
yarn dev
```

Using pnpm:

```sh
pnpm dev
```

Using bun:

```sh
bun dev
```

## Verify Installation

Confirm the React Email preview server is running on the configured preview
port. The server will display a preview interface where you can view email
templates from the `emails` folder.

### Notes on installation

Assuming React Email is installed in an existing project, update the top-level
package.json file with a script to run the React Email preview server.

```json
{
	"scripts": {
		"email": "email dev --dir emails --port 3000"
	}
}
```

Make sure the path to the emails folder is relative to the base project

From clay-coffman/agent-kit, MIT.

More from clay-coffman/agent-kit