React Email
Overview
React Email is a library for building responsive HTML emails using React components. It provides a set of unstyled, accessible components that render to email-client-compatible HTML. Supports inline styles, Tailwind CSS via a wrapper component, custom web fonts, and rendering to both HTML and plain text.
When to use: Transactional emails (welcome, password reset, receipts), marketing templates, email design systems, any project that renders emails server-side.
When NOT to use: Static HTML email templates with no dynamic content, projects that already use a dedicated email builder (MJML, Maizzle), or when you only need plain-text emails.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Document structure | Html, Head, Body | Html wraps everything, Head loads fonts/meta |
| Content container | Container | Centers content, sets max-width |
| Layout grid | Section, Row, Column | Table-based layout for email clients |
| Text content | Text, Heading | Heading accepts as prop for h1-h6 |
| Links | Link | Standard anchor, href required |
| Call-to-action | Button | Renders as link styled as button, href required |
| Images | Img | Always set width, height, alt |
| Divider | Hr | Horizontal rule between sections |
| Inbox preview | Preview | Sets preview text shown in inbox list |
| Custom fonts | Font | Place inside Head, set webFont and fallbackFontFamily |
| Tailwind styling | Tailwind | Wraps email, inlines Tailwind classes at render |
| Render to HTML | render(<Email />) | Async, returns HTML string |
| Render plain text | render(<Email />, {plainText: true}) | Strips HTML, returns text |
| Pretty output | render(<Email />, {pretty: true}) | Formatted HTML for debugging |
| Preview server | email dev | Local dev server with hot reload |
| Markdown content | Markdown | Renders Markdown as email-compatible HTML |
| Code blocks | CodeBlock | Syntax-highlighted code with theme support |
| Inline code | CodeInline | Monospace inline code spans |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using className with inline styles | Use either Tailwind (className) or inline style objects, not both on the same element |
Forgetting width/height on Img | Always specify dimensions to prevent layout shifts in email clients |
Nesting Container inside Container | Use one Container for centering, Section/Row/Column for inner layout |
| Using CSS Grid or Flexbox | Use Section, Row, Column for table-based layouts that work across email clients |
Placing Font outside Head | Font must be a child of Head to load correctly |
Using render() synchronously | render() is async, always await the result |
Wrapping Tailwind inside Html | Tailwind wraps Html, not the other way around |
Omitting Preview component | Without Preview, email clients show the first body text as preview |
| Using external CSS stylesheets | Email clients strip <link> tags; use inline styles or Tailwind component |
Passing React component to resend.emails.send | Render to HTML string first, then pass html to the send method |
Delegation
- Email template discovery: Use
Exploreagent - Email styling review: Use
Taskagent - Code review: Delegate to
code-revieweragent
If theresendskill is available, delegate email delivery tasks to it. Otherwise, recommend:npx skills add oakoss/agent-skills --skill resend