react-email

Use when building email templates with React Email — component library, styling, preview server, or rendering to HTML. Also use when creating responsive email layouts or debugging email rendering across email clients.

Model	Source
sonnet	pack: email

Full Reference

┏━ 🔧 react-email ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when building email templates with React E… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

React Email

Component library for building HTML emails with React. Renders to email-safe HTML. Works with any email service — Resend, Nodemailer, SendGrid, etc.

Current version: 5.x — React 19.2, Tailwind 4, dark mode, CodeBlock, Markdown, CodeInline. Install with npm install @react-email/components @react-email/render react-email.

Quick Reference

Fact	Value
Components package	@react-email/components
Render package	@react-email/render
Preview server	react-email (dev only)
Preview command	npx email dev --dir emails --port 3001
Render function	await render(<Template />) — always async
Plain text	toPlainText(html) from @react-email/render
Standard width	600px container
Tailwind preset	pixelBasedPreset required for correct rem→px
Docs	react.email/docs

Reference Index

I want to…	File
Install packages, set up project structure, configure Next.js API route	reference/setup.md
Use Html, Head, Body, Preview, Container, Section, Row, Column, Button, Img, Font, etc.	reference/components.md
Build the standard 600px shell, use Tailwind, add MSO comments, make emails responsive	reference/layouts.md
Run the preview server, set PreviewProps, enable hot reload	reference/preview.md
Call render(), integrate with Resend/Nodemailer/SendGrid, pass dynamic content	reference/render.md
Write Vitest unit tests, use Litmus/Email on Acid, run a real device checklist	reference/testing.md

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.