react-email

Generate HTML and plain text email templates with React Email and Tailwind.

Updated Apr 7, 2026
One-click install
npx skills add https://github.com/rally19/goform --skill react-email-rally19
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/rally19/goform/tree/main/.qwen/skills/react-email
Command: npx skills add https://github.com/rally19/goform --skill react-email-rally19

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create reliable, cross-client HTML emails without wrestling with email client CSS quirks or sending plumbing. The skill centralizes component-based templates, editor-driven content, asset handling, rendering, and provider integration so teams can produce consistent transactional and marketing emails faster.

Core Features & Use Cases

  • Component-first email templates using React Email components (Html, Body, Container, Row/Column, Button, Img, Preview).
  • Tailwind styling with pixelBasedPreset for email-safe pixel units and enforced best-practices (box-border on buttons, explicit border styles, no media-query reliance).
  • Visual EmailEditor integration for embedding a drag-and-drop editor and exporting email-ready HTML and plain text.
  • Internationalization support (next-intl, react-intl, react-i18next) and RTL handling for multi-locale templates.
  • Rendering and sending workflows including render-to-HTML/plain-text and Resend/Nodemailer/SendGrid examples.
  • Static asset guidance: use emails/static/ and a NODE_ENV-based baseURL pattern for dev vs production.

Quick Start

Create a Tailwind-styled welcome email component using pixelBasedPreset, include PreviewProps, and reference your logo at /static/logo.png.

Frequently Asked Questions about react-email

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build production-ready HTML email templates with React and Tailwind?

Build production-ready HTML emails by composing React Email components like Html, Body, and Container with Tailwind's pixelBasedPreset, which enforces email-safe pixel units and best practices like box-box borders and no media-query reliance for cross-client compatibility.

How do I handle internationalization and RTL text in HTML emails?

Handle internationalization in HTML emails using next-intl, react-intl, or react-i18next integrations to support multi-locale templates, including proper right-to-left (RTL) text rendering for localized layouts.

Can I embed a visual drag-and-drop email editor inside my application?

You can embed a visual email editor in your application using the EmailEditor integration, providing drag-and-drop composition that directly exports email-ready HTML and plain text outputs.

How do I render React emails to plain text and send them through Resend?

Render React emails to HTML and plain text, then send them through Resend or other SMTP/SDK providers like Nodemailer or SendGrid by integrating the provided rendering and sending workflows.

How do I manage static assets like logos for email templates in development?

Manage static assets for email templates by placing them in the emails/static/ folder and applying a NODE_ENV-based baseURL pattern to correctly resolve paths between development and production environments.