react-email

Build and render HTML emails from React components.

1|Updated Oct 27, 2025

Search Tags:#templates #frontend #tailwind #react-email #email-sending #html-email

Ready to run

npx skills add https://github.com/sandrasocial/sselfie-9g --skill react-email-sandrasocial

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Email provides a structured approach to building HTML emails using React components, turning complex email layouts into reusable, testable blocks to reduce manual crafting.

Core Features & Use Cases

Build and preview email templates with a component-based approach using @react-email/components.
Leverage Tailwind styling via the Tailwind wrapper and pixelBasedPreset to produce inline styles compatible with email clients.
Use the provided utilities and components to compose transactional and marketing emails, newsletters, or notifications, then render to HTML for sending via Resend, Nodemailer, or other providers.

Quick Start

Run the create-email CLI to bootstrap a starter project and customize the sample email templates.

Frequently Asked Questions about react-email

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

FAQPage Schema

How do I build HTML emails using React components?▼

Build HTML emails using React components by leveraging a component-based approach with @react-email/components. This turns complex email layouts into reusable, testable blocks to reduce manual crafting and produce production-ready templates.

Can I use Tailwind CSS to style HTML emails for different email clients?▼

Yes, you can style HTML emails with Tailwind CSS using the Tailwind wrapper and pixelBasedPreset. This produces inline styles compatible with various email clients, ensuring your templates render correctly across different platforms.

How do I send transactional emails rendered with React components?▼

Render React email components to HTML for sending transactional emails via providers like Resend or Nodemailer. This allows you to compose notifications or marketing emails and dispatch them through common email-sending services.

What is the best way to bootstrap a React email template project?▼

The best way to bootstrap a React email template project is running the create-email CLI. This starter project includes sample email templates you can customize to quickly scaffold your transactional or marketing email workflows.

Does React Email support previewing templates before sending?▼

Yes, React Email supports previewing email templates before sending. You can build and preview transactional, marketing, or newsletter emails using the component-based approach to verify layouts and inline styles prior to rendering to HTML.

Why should I use React components instead of manually coding HTML emails?▼

Using React components instead of manually coding HTML emails provides a structured approach that transforms complex layouts into reusable, testable blocks. This reduces manual crafting and makes composing transactional or marketing emails more maintainable.