Esta página se muestra en inglés. Una traducción al español está en curso.
ScriptsMay 11, 2026·4 min de lectura

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
Listo para agents

Staging seguro para este activo

Este activo primero queda en staging. El prompt copiado pide inspeccionar los archivos staged antes de activar scripts, config MCP o config global.

Stage only · 29/100Política: staging
Superficie agent
Cualquier agent MCP/CLI
Tipo
Skill
Instalación
Stage only
Confianza
Confianza: Community
Entrada
Asset
Comando de staging seguro
npx -y tokrepo@latest install d19a2ecd-51e1-412c-8400-313f8e7c8a7d --target codex

Primero deja archivos en staging; la activación requiere revisar el README y el plan staged.

Introducción

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+

🙏

Fuente y agradecimientos

Built by Resend. Licensed under MIT.

resend/react-email — ⭐ 16,000+

Discusión

Inicia sesión para unirte a la discusión.
Aún no hay comentarios. Sé el primero en compartir tus ideas.

Activos relacionados

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
◈Inicio🔍Buscar👤Yo