name: react-email description: >- Assists with building responsive, cross-client email templates using React Email components. Use when creating transactional emails (welcome, receipts, password reset) that render correctly in Gmail, Outlook, Apple Mail, and mobile clients. Trigger words: react email, email template, transactional email, email components, email rendering. license: Apache-2.0 compatibility: "Requires React 18+" metadata: author: terminal-skills version: "1.0.0" category: automation tags: ["react-email", "email", "transactional", "templates", "rendering"]

React Email

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:

1. Create emails/welcome.tsx with <Html>, <Head>, <Preview>, <Body>, and <Container>
2. Add a logo with <Img>, personalized greeting with <Text>, and onboarding CTA with <Button>
3. Wrap with <Tailwind> for responsive styling and dark mode support
4. 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:

1. Define a typed props interface for order data (items, prices, shipping, total)
2. Use <Section> for header, order summary, and footer sections
3. Build line items table with <Row> and <Column> for responsive grid layout
4. 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.