Overview

React Email is a library for building responsive, cross-client email templates using React components. It provides pre-built components (Container, Section, Button, Text, Img) that compile to inline-styled, table-based HTML compatible with Gmail, Outlook, and mobile clients, with a local dev server for previewing templates and integration with any email sending service.

Instructions

When building templates, use React Email components (<Html>, <Container>, <Section>, <Text>, <Button>, <Img>) with props for personalization, keeping the container max-width at 600px for email client compatibility.
When styling, use the <Tailwind> wrapper for utility classes that compile to inline styles, or use React style props directly since email clients strip <style> tags.
When rendering, use render(element) to produce HTML strings and render(element, { plainText: true }) for plain text versions, compatible with Resend, SendGrid, Nodemailer, or any email service.
When previewing, use email dev for a local preview server with hot reload and test email sending.
When adding inbox preview text, include <Preview> on every email to control the 40-90 character preview shown in inbox listings.
When handling dynamic content, pass data as typed props to email components for type-safe personalization (name, order details, links).

Examples

Example 1: Build a welcome email with CTA button

User request: "Create a welcome email template for new user signups"

Actions:

Create emails/welcome.tsx with <Html>, <Head>, <Preview>, <Body>, and <Container>
Add a logo with <Img>, personalized greeting with <Text>, and onboarding CTA with <Button>
Wrap with <Tailwind> for responsive styling and dark mode support
Render with render(<WelcomeEmail name={user.name} />) and send via Resend

Output: A responsive welcome email with personalized content that renders correctly across all major email clients.

Example 2: Build a receipt email with order details

User request: "Create an order receipt email with line items and totals"

Actions:

Define a typed props interface for order data (items, prices, shipping, total)
Use <Section> for header, order summary, and footer sections
Build line items table with <Row> and <Column> for responsive grid layout
Add formatted prices and order number, with a "View Order" <Button> linking to the dashboard

Output: A receipt email with dynamic line items, formatted prices, and responsive layout for mobile.

Guidelines

Use <Preview> on every email to control inbox preview text (40-90 characters).
Use the <Tailwind> wrapper for styling since utilities compile to inline styles that email clients understand.
Always include a plain text version with render(template, { plainText: true }) since spam filters penalize HTML-only emails.
Test in Litmus or Email on Acid before deploying since Outlook renders differently from other clients.
Keep emails under 102KB of HTML since Gmail clips emails above this threshold.
Use <Container maxWidth={600}> since 600px is the safe width for all email clients.

react-email

Usage

Getting Started

Example Prompts

Documentation