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
Explore agent
- Email styling review: Use
Task agent
- Code review: Delegate to
code-reviewer agent
If the resend skill is available, delegate email delivery tasks to it.
Otherwise, recommend: npx skills add oakoss/agent-skills --skill resend
References
- Built-in components: structure, content, and layout
- Styling with inline CSS, Tailwind, responsive patterns, and fonts
- Rendering to HTML, preview server, and provider integration
1---
2name: react-email
3description: >
4 Build responsive HTML emails with React Email components. Covers email structure (Html, Head, Body, Container),
5 content components (Text, Heading, Button, Link, Img), layout (Section, Row, Column), styling with inline CSS
6 and Tailwind, custom fonts, preview text, and rendering to HTML.
7
8 Use when creating transactional emails, marketing templates, or email design systems.
9 Use for email rendering, preview, Tailwind email styling, and provider integration with Resend, Nodemailer, or SendGrid.
10license: MIT
11metadata:
12 author: oakoss
13 version: '1.1'
14 source: https://react.email/docs
15user-invocable: false
16---
17
18# React Email
19
20## Overview
21
22React 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.
23
24**When to use:** Transactional emails (welcome, password reset, receipts), marketing templates, email design systems, any project that renders emails server-side.
25
26**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.
27
28## Quick Reference
29
30| Pattern | API | Key Points |
31| ------------------ | ---------------------------------------- | ----------------------------------------------------------- |
32| Document structure | `Html`, `Head`, `Body` | `Html` wraps everything, `Head` loads fonts/meta |
33| Content container | `Container` | Centers content, sets `max-width` |
34| Layout grid | `Section`, `Row`, `Column` | Table-based layout for email clients |
35| Text content | `Text`, `Heading` | `Heading` accepts `as` prop for h1-h6 |
36| Links | `Link` | Standard anchor, `href` required |
37| Call-to-action | `Button` | Renders as link styled as button, `href` required |
38| Images | `Img` | Always set `width`, `height`, `alt` |
39| Divider | `Hr` | Horizontal rule between sections |
40| Inbox preview | `Preview` | Sets preview text shown in inbox list |
41| Custom fonts | `Font` | Place inside `Head`, set `webFont` and `fallbackFontFamily` |
42| Tailwind styling | `Tailwind` | Wraps email, inlines Tailwind classes at render |
43| Render to HTML | `render(<Email />)` | Async, returns HTML string |
44| Render plain text | `render(<Email />, { plainText: true })` | Strips HTML, returns text |
45| Pretty output | `render(<Email />, { pretty: true })` | Formatted HTML for debugging |
46| Preview server | `email dev` | Local dev server with hot reload |
47| Markdown content | `Markdown` | Renders Markdown as email-compatible HTML |
48| Code blocks | `CodeBlock` | Syntax-highlighted code with theme support |
49| Inline code | `CodeInline` | Monospace inline code spans |
50
51## Common Mistakes
52
53| Mistake | Correct Pattern |
54| ----------------------------------------------- | ----------------------------------------------------------------------------------------- |
55| Using `className` with inline styles | Use either Tailwind (`className`) or inline `style` objects, not both on the same element |
56| Forgetting `width`/`height` on `Img` | Always specify dimensions to prevent layout shifts in email clients |
57| Nesting `Container` inside `Container` | Use one `Container` for centering, `Section`/`Row`/`Column` for inner layout |
58| Using CSS Grid or Flexbox | Use `Section`, `Row`, `Column` for table-based layouts that work across email clients |
59| Placing `Font` outside `Head` | `Font` must be a child of `Head` to load correctly |
60| Using `render()` synchronously | `render()` is async, always `await` the result |
61| Wrapping `Tailwind` inside `Html` | `Tailwind` wraps `Html`, not the other way around |
62| Omitting `Preview` component | Without `Preview`, email clients show the first body text as preview |
63| Using external CSS stylesheets | Email clients strip `<link>` tags; use inline styles or Tailwind component |
64| Passing React component to `resend.emails.send` | Render to HTML string first, then pass `html` to the send method |
65
66## Delegation
67
68- **Email template discovery**: Use `Explore` agent
69- **Email styling review**: Use `Task` agent
70- **Code review**: Delegate to `code-reviewer` agent
71
72> If the `resend` skill is available, delegate email delivery tasks to it.
73> Otherwise, recommend: `npx skills add oakoss/agent-skills --skill resend`
74
75## References
76
77- [Built-in components: structure, content, and layout](references/components.md)
78- [Styling with inline CSS, Tailwind, responsive patterns, and fonts](references/styling-and-layout.md)
79- [Rendering to HTML, preview server, and provider integration](references/rendering.md)
oakoss