React Email

What is React Email?

React Email is a collection of unstyled email components for building emails with React and TypeScript. Its goal is to make email UI authoring easier by providing reusable building blocks and patterns for composing markup.

The library includes examples that show how to assemble common parts of an email (for example, document structure, layout containers, text, images, and buttons) and then render them for use in an email workflow.

Key Features

• Unstyled React components for email layout: Compose email structure using components such as Html, Head, Body, Container, Section, Text, and Img so you can control styling and layout.
• Tailwind-based styling option: Use a Tailwind wrapper to apply Tailwind classes to components (or choose inline CSS as an alternative approach).
• Examples and copyable starter code: Get started from example templates such as email-template.tsx, then replace the placeholder data with your own.
• Compatibility testing for popular mail clients: Use built-in checks to see how HTML/CSS is supported across Gmail, Apple Mail, Outlook, Yahoo Mail, HEY, and Superhuman.
• Deliverability-focused pre-send tools: Run tools including a link linter (validates links), a compatibility checker (assesses client support), and a spam score analyzer (to estimate the likelihood of being marked as spam).
• Conversion and integration support: Convert React email code into HTML or plain text and send it through common email service providers, including Resend, SendGrid, Amazon Web Services, and Postmark.

How to Use React Email

1. Create an email project using the provided starter command: npx create-email@latest.
2. Author an email template (for example, WelcomeEmail) in a .tsx file by composing React Email components.
3. Style the email using either Tailwind classes (via the Tailwind wrapper) or inline CSS, depending on your preferred workflow.
4. Preview and validate the output using the built-in linter, compatibility checker, and spam score tools before sending.
5. Export and send by converting the template to HTML or plain text and then using your email service provider (e.g., Resend, SendGrid, AWS, or Postmark).

Use Cases

• Marketing or onboarding emails with reusable templates: Build a welcome email once (with configurable props like username and company) and reuse the same component structure across campaigns.
• Teams standardizing email UI across products: Keep common layout primitives (headers, footers, sections, dividers, grids) consistent by using React Email components in multiple projects.
• Developer teams that want better client compatibility feedback: Run the compatibility checker to identify how a given HTML/CSS approach performs across common email clients.
• Apps that include an email editor: Integrate with an editor workflow so users can compose emails within your product while you rely on React Email components underneath.
• Automated sending pipelines: Convert templates to HTML or plain text and send via an email provider such as Resend, SendGrid, AWS, or Postmark.

FAQ

• Is React Email styled or unstyled? React Email is described as a collection of unstyled components. You apply styling yourself (for example with Tailwind via the Tailwind wrapper or with inline CSS).

• Can I style emails with Tailwind or inline CSS? Yes. The documentation content states you can make emails look correct using Tailwind or inline CSS.

• What validation tools are available before sending? The page lists a linter for checking links, a compatibility checker for HTML/CSS support across popular clients, and a spam score analyzer.

• What outputs does React Email support? It can convert React email code into HTML or plain text.

• Which email providers can React Email send through? The page names integrations with Resend, SendGrid, Amazon Web Services, and Postmark.

Alternatives

• Plain HTML email templates: You can hand-author HTML with tables and inline styles. This may be more direct, but you lose the React component workflow and the built-in linter/compatibility tools.
• Other component-based email template libraries: Look for libraries that provide reusable email UI primitives in code form (rather than static templates). These differ by how much tooling they provide for compatibility checks and deliverability scoring.
• Email design tools with drag-and-drop editors: These focus on visual editing for non-developers, but may not integrate as naturally with a React/TypeScript codebase or output plain-text/HTML conversion workflows.
• Server-side email template engines: Templating systems can generate HTML emails from templates and data, but they typically don’t provide the same React component structure and email client-focused checks described here.