ScriptsMay 11, 2026·4 min read

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

Safe staging for this asset

This asset is staged first. The copied prompt tells the agent to inspect the staged files and ask before activating scripts, MCP config, or global config.

Stage only · 29/100Policy: stage
Agent surface
Any MCP/CLI agent
Kind
Skill
Install
Stage only
Trust
Trust: Community
Entrypoint
Asset
Safe staging command
npx -y tokrepo@latest install d19a2ecd-51e1-412c-8400-313f8e7c8a7d --target codex

Stages files first; activation requires review of the staged README and plan.

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.

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

Built by Resend. Licensed under MIT.

resend/react-email — ⭐ 16,000+

Discussion

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

Related Assets

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
◈Home🔍Search👤Me