`, ``, ``, ``, ``, ``, ` ); } ``` ### Sending with Resend ```typescript import { Resend } from "resend"; import WelcomeEmail from "./emails/welcome"; const resend = new Resend("re_123456"); await resend.emails.send({ from: "hello@example.com", to: "user@example.com", subject: "Welcome!", react: WelcomeEmail({ name: "Alice" }), }); ``` ### Sending with Nodemailer ```typescript import { render } from "@react-email/render"; import nodemailer from "nodemailer"; import WelcomeEmail from "./emails/welcome"; const html = await render(WelcomeEmail({ name: "Alice" })); const transporter = nodemailer.createTransport({ /* SMTP config */ }); await transporter.sendMail({ from: "hello@example.com", to: "user@example.com", subject: "Welcome!", html, }); ``` ## FAQ **Q: Does React Email work with all email clients?** A: Yes. Components render to compatible HTML that works across Gmail, Outlook, Apple Mail, Yahoo, and mobile clients. **Q: Can I use Tailwind CSS?** A: Yes. Install `@react-email/tailwind` and wrap your email in a `` component to use Tailwind utility classes. **Q: Is React Email only for Resend?** A: No. While built by the Resend team, React Email works with any email provider. Use `render()` to get HTML, then send via any ESP or SMTP. **Q: Can I preview emails before sending?** A: Yes. Run `npm run dev` for a local preview server with hot reload at `localhost:3000`. ## Source & Thanks - GitHub: [resend/react-email](https://github.com/resend/react-email) — 18.4K+ ⭐ | MIT - Website: [react.email](https://react.email) - Docs: [react.email/docs](https://react.email/docs) ## Quick Use ```bash npx create-email@latest cd react-email-starter npm run dev ``` Open `http://localhost:3000` to preview and edit email templates live. ## Introduction **React Email** is a set of high-quality React components for building HTML emails. Created by the Resend team, it solves the pain of email HTML compatibility by providing components that render correctly in all major email clients. With 18.4K+ GitHub stars and the MIT license, React Email replaces messy HTML table layouts with clean JSX components, ships with a local preview server, and integrates with any email-sending service. ## Core Features - **React components**: Email-specific components like Html, Body, Container, Text, Button, and more - **Styling support**: Inline styles or Tailwind CSS - **Preview server**: Local dev server with hot reload - **Render to HTML**: Convert React components into email-compatible HTML strings - **ESP integration**: Supports Resend, Nodemailer, SendGrid, Postmark, and AWS SES ## FAQ **Q: Is React Email compatible with every email client?** A: Yes. Components render to compatible HTML supporting Gmail, Outlook, Apple Mail, Yahoo, and mobile clients. **Q: Does it only work with Resend?** A: No. It was built by the Resend team but works with any email service. ## Source & Thanks - GitHub: [resend/react-email](https://github.com/resend/react-email) — 18.4K+ ⭐ | MIT - Website: [react.email](https://react.email) --- Source: https://tokrepo.com/en/workflows/react-email-build-send-emails-using-react-f9027a32 Author: Script Depot