ScriptsApr 10, 2026·2 min read

React Email — Build and Send Emails Using React

React Email lets developers create beautiful HTML emails with React components, preview in browser, and send via Resend, Nodemailer, or any ESP.

Script Depot
Script Depot · Community
TL;DR
React Email replaces messy HTML table layouts with clean JSX components for building cross-client email templates.
§01

What it is

React Email is a collection of high-quality, unstyled components for building HTML emails using React and TypeScript. Created by the Resend team, it solves the notorious pain of email HTML compatibility by providing components that render correctly across all major email clients.

It is built for frontend developers who already know React and want to apply that knowledge to email development instead of wrestling with nested HTML tables and inline styles.

§02

How it saves time or tokens

Traditional email HTML requires extensive testing across clients (Gmail, Outlook, Apple Mail) and manual table-based layouts. React Email abstracts this away with pre-tested components. The local preview server with hot reload eliminates the send-to-test cycle, cutting email development time from hours to minutes.

§03

How to use

  1. Scaffold a new project: npx create-email@latest
  2. Start the dev server: cd react-email-starter && npm run dev
  3. Open http://localhost:3000 to preview and edit templates with hot reload
  4. Render to HTML string for sending via any ESP
§04

Example

import {
  Html, Head, Body, Container,
  Section, Text, Button, Img
} from '@react-email/components';

export default function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', background: '#f6f6f6' }}>
        <Container style={{ maxWidth: 600, margin: '0 auto' }}>
          <Section style={{ padding: 20 }}>
            <Text>Welcome, {name}.</Text>
            <Button
              href='https://example.com/dashboard'
              style={{ background: '#000', color: '#fff', padding: '12px 20px' }}
            >
              Go to Dashboard
            </Button>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}
§05

Related on TokRepo

§06

Common pitfalls

  • Outlook on Windows ignores many CSS properties; stick to the provided components rather than custom CSS for best compatibility
  • The preview server runs on port 3000 by default, which can conflict with other dev servers
  • Tailwind CSS support requires the optional @react-email/tailwind package and has some limitations with complex utilities

Frequently Asked Questions

Which email clients does React Email support?+

React Email components are tested against Gmail, Outlook (desktop and web), Apple Mail, Yahoo Mail, and other major clients. The components use battle-tested HTML patterns that maximize cross-client compatibility.

Can I use React Email with any email sending provider?+

Yes. React Email renders to an HTML string that you can send via Resend, Nodemailer, SendGrid, Postmark, AWS SES, or any other ESP. The rendering step is provider-agnostic.

Does React Email support Tailwind CSS?+

Yes, through the optional @react-email/tailwind package. Wrap your email in a Tailwind component and use utility classes. The package converts Tailwind classes to inline styles at render time.

How do I preview emails during development?+

Run npm run dev in your React Email project to start a local preview server with hot reload. You can see changes instantly in the browser without sending test emails.

Is React Email free to use?+

Yes. React Email is open source and MIT licensed. It is free for any project. The Resend sending service is a separate paid product, but React Email works with any ESP.

Citations (3)
Related on TokRepo
AI Coding ToolsAutomation ToolsFeatured Workflows
🙏

Source & Thanks

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Moodle — Open-Source Learning Management System

The most widely used open-source learning platform, providing course management, assessments, and collaboration tools for educators and organizations worldwide.

Script Depot

Sylius — Headless E-Commerce Framework on Symfony

An open-source headless e-commerce platform built on Symfony and API Platform, designed for developers who need a customizable and API-first commerce solution.

Script Depot

Akaunting — Free Self-Hosted Accounting Software

A free, open-source online accounting application built on Laravel for small businesses and freelancers to manage invoices, expenses, and financial reports.

Script Depot
◈Home🔍Search👤Me