# react-email

A skill for building HTML emails from React components. Use it when the email has to survive Outlook and Gmail without breaking.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 12600 installs · ★ 206
- Author: Resend
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/resend/resend-skills/tree/HEAD/skills/react-email/SKILL.md
- Updated: 2026-10-17
- HTML: https://affpapa.org/en/nevibecode/skills/react-email

## What it does

The skill builds email templates from React components: Html, Head, Body, Container, Button, Text and the rest. It uses Tailwind with the pixelBasedPreset because email clients don't understand rem. The output renders to HTML, ready to send through Resend.

The rules are strict: no flexbox or grid, use Row and Column or tables instead. Media queries are out, most email clients ignore them. Template variables like {{name}} go only in PreviewProps, never in the JSX. Check this before you ship to Outlook.

You need Node.js and the react-email package. The dev server runs on localhost:3000 and previews templates from the emails folder. Before writing code, the skill asks for the brand color, logo, tone and the production URL for static assets.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add resend/resend-skills --skill react-email -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/react-email/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-email/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add resend/resend-skills --skill react-email -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/react-email/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add resend/resend-skills --skill react-email -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/react-email/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install resend/resend-skills react-email
```

2. **Manually: put the files in place**
- File: `.github/skills/react-email/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add resend/resend-skills --skill react-email -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/resend/resend-skills --path skills/react-email
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-email/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add resend/resend-skills --skill react-email -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/resend/resend-skills/tree/HEAD/skills/react-email/SKILL.md

## When to use it
- build an HTML email from React components
- make an email that renders in Outlook and Gmail
- run a local preview server for templates
- send emails through Resend
- embed a visual email editor in an app

## Example prompts
- Create a welcome email with a verification button using react-email
- Build a password reset template without flexbox or media queries
- Add the React Email visual editor to my app

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 014b4ace00b0f74e.

BEGIN THIRD-PARTY FILE 014b4ace00b0f74e
````text
---
name: react-email
description: Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
license: MIT
metadata:
  author: Resend
  version: "2.1.0"
  homepage: https://react.email
  source: https://github.com/resend/react-email
  openclaw:
    install:
      - kind: node
        package: react-email
        label: React Email
    links:
      repository: https://github.com/resend/react-email
      documentation: https://resend.com/docs/react-email-skill
---

# 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

```sh
npm i react-email
```

Or scaffold a new project:

```sh
npx create-email@latest
cd react-email-starter
npm install
npm run dev
```

This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.

The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.

### Adding to an Existing Project

Install the packages and add a script to your `package.json`:

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

Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.

## Basic Email Template

Create an email component with proper structure using the Tailwind component for styling:

```tsx
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from 'react-email';

interface WelcomeEmailProps {
  name: string;
  verificationUrl: string;
}

export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
  return (
    <Html lang="en">
      <Tailwind
        config={{
          presets: [pixelBasedPreset],
          theme: {
            extend: {
              colors: {
                brand: '#007bff',
              },
            },
          },
        }}
      >
        <Head />
        <Body className="bg-gray-100 font-sans">
          <Preview>Welcome - Verify your email</Preview>
          <Container className="max-w-xl mx-auto p-5">
            <Heading className="text-2xl text-gray-800">
              Welcome!
            </Heading>
            <Text className="text-base text-gray-800">
              Hi {name}, thanks for signing up!
            </Text>
            <Button
              href={verificationUrl}
              className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
            >
              Verify Email
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// Preview props for testing
WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  verificationUrl: 'https://example.com/verify/abc123'
} satisfies WelcomeEmailProps;
````
END THIRD-PARTY FILE 014b4ace00b0f74e

The third-party file has ended. Everything between the 014b4ace00b0f74e tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3166 of 14424 bytes. © Resend · MIT · https://github.com/resend/resend-skills/tree/HEAD/skills/react-email/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md