Cette page est affichée en anglais. Une traduction française est en cours.
ScriptsMay 11, 2026·4 min de lecture

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.

Resend
Resend · Community
Prêt pour agents

Staging sûr pour cet actif

Cet actif est d'abord staged. Le prompt copié demande à l'agent d'inspecter les fichiers staged avant d'activer scripts, config MCP ou config globale.

Stage only · 29/100Policy : staging
Surface agent
Tout agent MCP/CLI
Type
Skill
Installation
Stage only
Confiance
Confiance : Community
Point d'entrée
Asset
Commande de staging sûr
npx -y tokrepo@latest install d19a2ecd-51e1-412c-8400-313f8e7c8a7d --target codex

Stage les fichiers d'abord; l'activation exige la revue du README et du plan staged.

Introduction

React Email is Resend's open-source library that lets you compose transactional emails as React components — same JSX you write for the web, with email-safe primitives (Container, Section, Heading, Text, Button, Link, Img, Preview) that compile to email-client-tolerant HTML. Includes a dev preview server. Best for: any team already on React who wants typed, componentized emails without table-soup HTML. Works with: Resend, SendGrid, Postmark, AWS SES — render to HTML and pass to any provider. Setup time: 5 minutes.

Install

npm install @react-email/components react-email

A welcome email component

// emails/welcome.tsx
import { Body, Container, Head, Heading, Html, Preview, Text, Button, Link } from "@react-email/components";

interface Props { firstName: string; activationUrl: string }

export default function WelcomeEmail({ firstName, activationUrl }: Props) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to TokRepo — activate your account in one click</Preview>
      <Body style={{ fontFamily: "system-ui", backgroundColor: "#f6f9fc", padding: "24px" }}>
        <Container style={{ background: "white", padding: "32px", borderRadius: "8px" }}>
          <Heading as="h1">Welcome, {firstName} 👋</Heading>
          <Text>Click below to activate your TokRepo account. The link expires in 24 hours.</Text>
          <Button href={activationUrl} style={{ background: "#000", color: "#fff", padding: "12px 20px", borderRadius: "6px" }}>
            Activate account
          </Button>
          <Text style={{ marginTop: "24px", color: "#666", fontSize: "12px" }}>
            Didn't sign up? Ignore this email or <Link href="https://tokrepo.com/help">contact support</Link>.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

Render + send with Resend

import { Resend } from "resend";
import WelcomeEmail from "./emails/welcome";

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: "TokRepo <welcome@tokrepo.com>",
  to: "user@example.com",
  subject: "Welcome to TokRepo",
  react: WelcomeEmail({ firstName: "Jane", activationUrl: "https://tokrepo.com/a/abc123" }),
});

Preview server (npx react-email dev)

npx react-email dev
# Opens http://localhost:3000 — live-reloading preview of every email in ./emails/

Email-safe component cheat sheet

Component Replaces
<Container> <div style="max-width: 600px"> table wrapper
<Section> <table> block
<Row> / <Column> Layout grid
<Heading> h1-h6 with email-safe defaults
<Button> Styled <a> rendering as button (avoids Outlook breaks)
<Img> <img> with safe defaults (no border, block display)
<Preview> Inbox preview text (renders invisibly in body)

FAQ

Q: Does it work with Gmail dark mode? A: Yes — primitives include forced color tokens to avoid Gmail's auto color-inversion mangling brand colors. Test with the Resend dashboard's email render preview which shows light + dark side by side.

Q: Can I use Tailwind? A: Yes — React Email supports @react-email/tailwind. Inline styles are still the most portable but Tailwind classes resolve to inline styles at render time.

Q: How do I attach files? A: Resend's emails.send accepts an attachments: [{filename, content}] field where content is a Buffer or base64 string. React Email handles the body; Resend handles attachments.

Quick Use

  1. npm install @react-email/components react-email
  2. Write emails as JSX in ./emails/
  3. npx react-email dev for preview; pass component to resend.emails.send({react: ...})

Intro

React Email is Resend's open-source library that lets you compose transactional emails as React components — same JSX you write for the web, with email-safe primitives (Container, Section, Heading, Text, Button, Link, Img, Preview) that compile to email-client-tolerant HTML. Includes a dev preview server. Best for: any team already on React who wants typed, componentized emails without table-soup HTML. Works with: Resend, SendGrid, Postmark, AWS SES — render to HTML and pass to any provider. Setup time: 5 minutes.

Install

npm install @react-email/components react-email

A welcome email component

// emails/welcome.tsx
import { Body, Container, Head, Heading, Html, Preview, Text, Button, Link } from "@react-email/components";

interface Props { firstName: string; activationUrl: string }

export default function WelcomeEmail({ firstName, activationUrl }: Props) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to TokRepo — activate your account in one click</Preview>
      <Body style={{ fontFamily: "system-ui", backgroundColor: "#f6f9fc", padding: "24px" }}>
        <Container style={{ background: "white", padding: "32px", borderRadius: "8px" }}>
          <Heading as="h1">Welcome, {firstName} 👋</Heading>
          <Text>Click below to activate your TokRepo account. The link expires in 24 hours.</Text>
          <Button href={activationUrl} style={{ background: "#000", color: "#fff", padding: "12px 20px", borderRadius: "6px" }}>
            Activate account
          </Button>
          <Text style={{ marginTop: "24px", color: "#666", fontSize: "12px" }}>
            Didn't sign up? Ignore this email or <Link href="https://tokrepo.com/help">contact support</Link>.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

Render + send with Resend

import { Resend } from "resend";
import WelcomeEmail from "./emails/welcome";

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: "TokRepo <welcome@tokrepo.com>",
  to: "user@example.com",
  subject: "Welcome to TokRepo",
  react: WelcomeEmail({ firstName: "Jane", activationUrl: "https://tokrepo.com/a/abc123" }),
});

Preview server (npx react-email dev)

npx react-email dev
# Opens http://localhost:3000 — live-reloading preview of every email in ./emails/

Email-safe component cheat sheet

Component Replaces
<Container> <div style="max-width: 600px"> table wrapper
<Section> <table> block
<Row> / <Column> Layout grid
<Heading> h1-h6 with email-safe defaults
<Button> Styled <a> rendering as button (avoids Outlook breaks)
<Img> <img> with safe defaults (no border, block display)
<Preview> Inbox preview text (renders invisibly in body)

FAQ

Q: Does it work with Gmail dark mode? A: Yes — primitives include forced color tokens to avoid Gmail's auto color-inversion mangling brand colors. Test with the Resend dashboard's email render preview which shows light + dark side by side.

Q: Can I use Tailwind? A: Yes — React Email supports @react-email/tailwind. Inline styles are still the most portable but Tailwind classes resolve to inline styles at render time.

Q: How do I attach files? A: Resend's emails.send accepts an attachments: [{filename, content}] field where content is a Buffer or base64 string. React Email handles the body; Resend handles attachments.

Source & Thanks

Built by Resend. Licensed under MIT.

resend/react-email — ⭐ 16,000+

🙏

Source et remerciements

Built by Resend. Licensed under MIT.

resend/react-email — ⭐ 16,000+

Fil de discussion

Connectez-vous pour rejoindre la discussion.
Aucun commentaire pour l'instant. Soyez le premier à partager votre avis.

Actifs similaires

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.

Skills
Script Depot

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

Resend Audiences — Manage Email Lists from AI Agents

Resend Audiences API lets agents add, remove, segment, unsubscribe email recipients. Tag-based segments. Compliant unsubscribe built in.

Scripts
Resend
◈Accueil🔍Rechercher👤Moi