react-email

Generate React Email HTML templates with React components and Tailwind.

Updated Feb 8, 2026

Search Tags:#react #tailwind #email templates #resend #react-email #transactional email #html email

Ready to run

npx skills add https://github.com/irchamaji/agents --skill react-email-irchamaji

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/irchamaji/agents/tree/main/skills/react-email
Command: npx skills add https://github.com/irchamaji/agents --skill react-email-irchamaji

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the hard-to-manage process of building reliable HTML email templates by guiding you to use React Email components and client-safe styling patterns.

Core Features & Use Cases

React Email template creation: Build transactional and marketing emails (welcome, password reset, notifications, confirmations) using React components.
Email-client safe constraints: Apply guardrails for common pitfalls like unsupported CSS features, invalid template variables, and problematic image formats.
Preview, rendering, and sending support: Run a local preview workflow, render HTML/plain text, and optionally send via Resend guidance.

Quick Start

Ask your AI assistant to create a React Email welcome template for your product using Tailwind with pixelBasedPreset and your brand color, logo (PNG/JPG), and production asset URL.

Frequently Asked Questions about react-email

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

FAQPage Schema

How do I create HTML email templates with React components?▼

Create HTML email templates with React components by composing React Email structures for transactional and marketing emails. This approach generates cross-client compatible HTML using React syntax, ensuring consistent and reproducible template structures for welcome messages and notifications.

What's the best way to build transactional emails that work across different email clients?▼

Building transactional emails with React Email components and client-safe styling patterns ensures cross-client compatibility. The workflow applies guardrails for common pitfalls like unsupported CSS features, invalid template variables, and problematic image formats to maintain consistent rendering.

Can I use Tailwind CSS when building React Email templates?▼

Yes, you can use Tailwind CSS when building React Email templates by applying the pixelBasedPreset. This styling approach integrates with React component composition to generate structured HTML email templates for transactional and marketing workflows.

How do I send React Email templates using Resend?▼

Send React Email templates using Resend through integrated preview, rendering, and sending support. The workflow allows you to run a local preview, render the React components into HTML or plain text, and optionally send the output via Resend guidance.

What are the limitations of using React for HTML email templates?▼

Limitations of using React for HTML email templates include email-client constraints like unsupported CSS features, invalid template variables, and problematic image formats. The workflow applies specific guardrails to manage these image, variable, and style limitations for reliable rendering.