/react-email

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

npm i react-email

Or scaffold a new project:

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`:

{
  "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:

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;

export { WelcomeEmail };

Behavioral Guidelines

• When iterating over the code, only update what the user asked for. Keep the rest intact.
• If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach.
• Never use template variables (like `{{name}}`) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for `{{variableName}}`, place the mustache string only in PreviewProps, never in the component JSX:

const EmailTemplate = (props) => {
  return (
    <h1>Hello, {props.variableName}!</h1>
  );
}

EmailTemplate.PreviewProps = {
  variableName: "{{variableName}}",
};

export default EmailTemplate;

• Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid.

Essential Components

See [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation.

**Core Structure:**

• `Html` - Root wrapper with `lang` attribute
• `Head` - Meta elements, styles, fonts
• `Body` - Main content wrapper
• `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email.
• `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`.
• `Row` & `Column` - Multi-column layouts
• `Tailwind` - Enables Tailwind CSS utility classes

**Content:**

• `Preview` - Inbox preview text, always first inside `<Body>`
• `Heading` - h1-h6 headings
• `Text` - Paragraphs
• `Button` - Styled link buttons (always include `box-border`)
• `Link` - Hyperlinks
• `Img` - Images (see Static Files section below)
• `Hr` - Horizontal dividers

**Specialized:**

• `CodeBlock` - Syntax-highlighted code
• `CodeInline` - Inline code
• `Markdown` - Render markdown
• `Font` - Custom web fonts

Before Writing Code

When a user requests an email template, ask clarifying questions FIRST if they haven't provided:

1. **Brand colors** - Ask for primary brand color (hex code like #007bff) 2. **Logo** - Ask if they have a logo file and its format (PNG/JPG only - warn if SVG/WEBP) 3. **Style preference** - Professional, casual, or minimal tone 4. **Production URL** - Where will static assets be hosted in production?

Static Files and Images

Directory Structure

Local images must be placed in the `static` folder inside your emails directory:

project/
├── emails/
│   ├── welcome.tsx
│   └── static/           <-- Images go here
│       └── logo.png

Dev vs Production URLs

Use this pattern for images that work in both dev preview and production:

const baseURL = process.env.NODE_ENV === "production"
  ? "https://cdn.example.com"  // User's production CDN
  : "";

export defaul