SkillsApr 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
Agent ready

Ready-to-run agent install

This asset can be installed after the agent chooses its runtime, checks the plan, and runs the matching command.

Native · 98/100Policy: allow
Agent surface
Any MCP/CLI agent
Kind
Skill
Install
Single
Trust
Trust: Established
Entrypoint
step-1.md
Direct install command
npx -y tokrepo@latest install f9027a32-3474-11f1-9bc6-00163e2b0d79 --target codex

Run after dry-run confirms the install plan.

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

Resend — Modern Email API for Developers

Developer-first email API with React Email templates, webhooks, and deliverability built-in. Send transactional emails with beautiful templates in 3 lines of code. By the creator of Novu. 15,000+ stars.

Skills
Resend

React Email — Build Transactional Emails as JSX

React Email is Resend's open-source lib for writing transactional emails as React components. Primitives, HTML render, preview server.

Scripts
Resend

Nodemailer — Send Emails from Node.js with Ease

The de facto email sending library for Node.js, supporting SMTP, OAuth2, HTML templates, and attachments with a simple unified API.

Skills
Script Depot

React Three Fiber — Build 3D Scenes with React Components

React Three Fiber is a React renderer for Three.js that lets developers build interactive 3D scenes using declarative JSX components, hooks, and the full React ecosystem.

Skills
AI Open Source
◈Home🔍Search👤Me