react-email

Generate React Email templates with Tailwind and Row/Column layouts.

Updated Feb 6, 2026
One-click install
npx skills add https://github.com/Vishvsalvi/magicmail --skill react-email-vishvsalvi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/Vishvsalvi/magicmail/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/Vishvsalvi/magicmail --skill react-email-vishvsalvi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Email enables building robust HTML emails with React components, Tailwind presets, and safe defaults.

Core Features & Use Cases

  • Generate production-ready email templates using Html, Body, Tailwind, and Row/Column
  • Enforce email-client constraints (no flexbox, no media queries, pixel-based presets)
  • Support internationalization and accessible markup for emails

Quick Start

Create a template using Tailwind with the pixelBasedPreset, then compose a simple email using core components.

Frequently Asked Questions about react-email

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

FAQPage Schema
How do I build compliant HTML emails using React components?

Build compliant HTML emails using React by generating production-ready templates with core components, Tailwind presets, and safe defaults to enforce email-client constraints.

Why does my HTML email break in certain email clients when using flexbox or media queries?

HTML emails break because many clients lack flexbox and media query support. Avoid them by using pixel-based presets and Row/Column layouts to enforce client compatibility.

Can I use Tailwind CSS to style React email templates?

Yes, you can use Tailwind CSS to style React email templates by applying a pixel-based Tailwind preset to generate production-ready markup with enforced email-client constraints.

How do I add internationalization to my React email templates?

Add internationalization to React email templates by applying the built-in i18n support to generate accessible markup that covers common multilingual use cases.

What is the best way to structure complex layouts in HTML emails without flexbox?

The best way to structure HTML email layouts without flexbox is composing them with Row and Column components to ensure production-ready patterns across various email clients.

Do I need to manually import every component when creating React email templates?

No, you do not need to manually manage unused imports; the system enforces best practices by importing only the components actually used to ensure safe asset handling.