# 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. ## Install Save as a script file and run: ## 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 ```bash npm install @react-email/components react-email ``` ### A welcome email component ```tsx // 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 ( Welcome to TokRepo — activate your account in one click Welcome, {firstName} 👋 Click below to activate your TokRepo account. The link expires in 24 hours. Didn't sign up? Ignore this email or contact support. ); } ``` ### Render + send with Resend ```typescript import { Resend } from "resend"; import WelcomeEmail from "./emails/welcome"; const resend = new Resend(process.env.RESEND_API_KEY); await resend.emails.send({ from: "TokRepo ", to: "user@example.com", subject: "Welcome to TokRepo", react: WelcomeEmail({ firstName: "Jane", activationUrl: "https://tokrepo.com/a/abc123" }), }); ``` ### Preview server (`npx react-email dev`) ```bash npx react-email dev # Opens http://localhost:3000 — live-reloading preview of every email in ./emails/ ``` ### Email-safe component cheat sheet | Component | Replaces | |---|---| | `` | `

` table wrapper | | `

` | `` block | | `` / `` | Layout grid | | `` | h1-h6 with email-safe defaults | | ` 没注册？忽略此邮件或联系客服。 ); } ``` ### 配 Resend 渲染 + 发送 ```typescript import { Resend } from "resend"; import WelcomeEmail from "./emails/welcome"; const resend = new Resend(process.env.RESEND_API_KEY); await resend.emails.send({ from: "TokRepo ", to: "user@example.com", subject: "欢迎来到 TokRepo", react: WelcomeEmail({ firstName: "Jane", activationUrl: "https://tokrepo.com/a/abc123" }), }); ``` ### 预览服务器（`npx react-email dev`） ```bash npx react-email dev # 打开 http://localhost:3000 —— ./emails/ 下每封邮件实时刷新预览 ``` ### 邮件安全组件 cheat sheet | 组件 | 替代什么 | |---|---| | `` | `

` | `

` 块 | | `` / `` | 布局网格 | | `` | h1-h6，邮件安全默认 | | `