Skills2026年4月10日·1 分钟阅读

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 · Community

Agent 就绪

Agent 可直接安装

这个资产可安装；Agent 先选择当前运行时、检查安装计划，再运行匹配命令。

Native · 98/100策略：允许

Agent 入口

任意 MCP/CLI Agent

类型

Skill

安装

Single

信任

信任等级：Established

入口

step-1.md

直接安装命令

npx -y tokrepo@latest install f9027a32-3474-11f1-9bc6-00163e2b0d79 --target codex

先 dry-run 确认安装计划，再运行此命令。

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

Scaffold a new project: npx create-email@latest
Start the dev server: cd react-email-starter && npm run dev
Open http://localhost:3000 to preview and edit templates with hot reload
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

AI Tools for Coding -- Developer tools for building with AI assistance
Automation Tools -- Automate repetitive development workflows

§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

常见问题

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.

引用来源 (3)

React Email GitHub— React Email is created by the Resend team
React Email Documentation— Components render correctly across major email clients
React Email Integrations— Supports Resend, Nodemailer, SendGrid, Postmark, AWS SES

🙏

来源与感谢

GitHub: resend/react-email — 18.4K+ ⭐ | MIT
Website: react.email

讨论

登录后参与讨论。

还没有评论，来写第一条吧。

React Email — Build and Send Emails Using React

Agent 可直接安装

What it is

How it saves time or tokens

How to use

Example

Related on TokRepo

Common pitfalls

常见问题

引用来源 (3)

TokRepo 相关

来源与感谢

讨论

相关资产

Resend — Modern Email API for Developers

React Email — Build Transactional Emails as JSX

Nodemailer — Send Emails from Node.js with Ease

React Three Fiber — Build 3D Scenes with React Components