resend/resend-skills包含需要注意的行為
SKILL DETAIL
react-email
resend/resend-skills/react-email
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
安裝量 · 103查看來源
Installation
npx skills add https://github.com/resend/resend-skills --skill react-email
技能檔案
SKILL.md
最近同步 · 2026年8月29日
references/COMPONENTS.md›
# React Email Components Reference
Complete reference for all React Email components. All examples use the Tailwind component for styling.
**Important:** Only import the components you need. Do not use components in the code if you are not importing them.
## Available Components
All components are imported from `react-email`:
- **Body** - A React component to wrap emails
- **Button** - A link that is styled to look like a button
- **CodeBlock** - Display code with a selected theme and regex highlighting using Prism.js
- **CodeInline** - Display a predictable inline code HTML element that works on all email clients
- **Column** - Display a column that separates content areas vertically in your email (must be used with Row)
- **Container** - A layout component that centers your content horizontally on a breaking point
- **Font** - A React Font component to set your fonts
- **Head** - Contains head components, related to the document such as style and meta elements
- **Heading** - A block of heading text
- **Hr** - Display a divider that separates content areas in your email
- **Html** - A React html component to wrap emails
- **Img** - Display an image in your email
- **Link** - A hyperlink to web pages, email addresses, or anything else a URL can address
- **Markdown** - A Markdown component that converts markdown to valid react-email template code
- **Preview** - A preview text that will be displayed in the inbox of the recipient
- **Row** - Display a row that separates content areas horizontally in your email
- **Section** - Display a section that can also be formatted using rows and columns
- **Tailwind** - A React component to wrap emails with Tailwind CSS
- **Text** - A block of text separated by blank spaces
## Tailwind
The recommended way to style React Email components. Wrap your email content and use utility classes.
```tsx
import { Tailwind, pixelBasedPreset, Html, Body, Container, Heading, Text, Button } from 'react-email';
export default function Email() {
return (
<Html lang="en">
<Tailwind
config={{
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: '#007bff',
accent: '#28a745'
},
},
},
}}
>
<Body className="bg-gray-100 font-sans">
<Container className="max-w-xl mx-auto p-5">
<Heading className="text-2xl font-bold text-brand mb-4">
Welcome!
</Heading>
<Text className="text-base text-gray-700 mb-4">
Your content here.
</Text>
<Button
href="https://example.com"
className="bg-brand text-white px-6 py-3 rounded-lg block text-center box-border"
>
Get Started
</Button>
</Container>
</Body>
</Tailwind>
</Html>
);
}
```
**Props:**
- `config` - Tailwind configuration object
**How it works:**
- Tailwind classes are converted to inline styles automatically
- Media queries are extracted to `<style>` tag in `<head>`
- CSS variables are resolved
- RGB color syntax is normalized for email client compatibility
**Important:**
- Always use `pixelBasedPreset` - email clients don't support `rem` units
- Custom config is optional - defaults work well
- Avoid responsive classes (sm:, md:, lg:). These have limited email client support, and are not reliable across major clients
## Structural Components
### Html
Root wrapper for the email. Always use as the outermost component.
```tsx
import { Html, Tailwind, pixelBasedPreset } from 'react-email';
<Html lang="en" dir="ltr">
<Tailwind config={{ presets: [pixelBasedPreset] }}>
{/* email content */}
</Tailwind>
</Html>
```
**Props:**
- `lang` - Language code (e.g., "en", "es", "fr")
- `dir` - Text direction ("ltr" or "rtl")
### Head
Contains head components, related to the document such as style and meta elements. Place inside `<Tailwind>`.
```tsx
import { Head } from 'react-email';
<Head>
<title>Email Title</title>
</Head>
```
### Body
A React component to wrap emails.
```tsx
import { Body } from 'react-email';
<Body className="bg-gray-100 font-sans">
{/* email content */}
</Body>
```
### Container
A layout component that centers your content horizontally on a breaking point. Has a max-width constraint of `37.5em`.
```tsx
import { Container } from 'react-email';
<Container className="max-w-xl mx-auto p-5">
{/* centered content */}
</Container>
```
### Section
Display a section that can also be formatted using rows and columns.
```tsx
import { Section } from 'react-email';
<Section className="p-5 bg-white">
{/* section content */}
</Section>
```
Layout components (`<Section>`, `<Row>`, `<Container>`, `<Markdown>` tables) render `<table role="presentation">` by default so screen readers don't announce them as data tables. If you drop in a raw `<table>` for layout, add `role="presentation"` yourself.
### Row & Column
Row displays content areas horizontally, Column displays content areas vertically. A Column needs to be used in combination with a Row component.
```tsx
import { Section, Row, Column } from 'react-email';
<Section>
<Row>
<Column className="w-1/2 p-2 align-top">
Left column content
</Column>
<Column className="w-1/2 p-2 align-top">
Right column content
</Column>
</Row>
</Section>
```
**Column widths:**
- Use percentage widths (e.g., "w-1/2", "w-1/3")
- Or use Tailwind's width utilities
- Total should add up to 100% or container width
## Content Components
### Preview
A preview text that will be displayed in the inbox of the recipient.
```tsx
import { Preview } from 'react-email';
<Preview>Welcome to our platform - Get started today!</Preview>
```
**Best practices:**
- Keep under 140 characters
- Make it compelling and action-oriented
- Should always be the first element inside `<Body>`
### Heading
A block of heading text (h1-h6).
```tsx
import { Heading } from 'react-email';
<Heading as="h1" className="text-2xl font-bold text-gray-800 mb-4">
Welcome to Acme
</Heading>
<Heading as="h2" className="text-xl font-semibold text-gray-600 mb-3">
Getting Started
</Heading>
```
**Props:**
- `as` - HTML heading level ("h1" through "h6")
### Text
A block of text separated by blank spaces.
```tsx
import { Text } from 'react-email';
<Text className="text-base leading-6 text-gray-800 my-4">
Your paragraph content here.
</Text>
```
### Button
A link that is styled to look like a button. Has workaround for padding issues in Outlook.
```tsx
import { Button } from 'react-email';
<Button
href="https://example.com/verify"
target="_blank"
className="bg-blue-600 text-white px-5 py-3 rounded block text-center no-underline font-medium box-border"
>
Verify Email Address
</Button>
```
**Props:**
- `href` (required) - URL to link to
- `target` - Default is "_blank"
**Styling tips:**
- Use `block` for full-width buttons
- Use `text-center` for centered text
- Add `no-underline` to remove underline
### Link
A hyperlink to web pages, email addresses, or anything else a URL can address.
```tsx
import { Link } from 'react-email';
<Link href="https://example.com" target="_blank" className="text-blue-600 underline">
Visit our website
</Link>
```
**Props:**
- `href` (required) - URL to link to
- `target` - Default is "_blank"
### Img
Display an image in your email.
```tsx
import { Img } from 'react-email';
<Img
src="https://example.com/logo.png"
alt="Company Logo"
width="150"
height="50"
className="block mx-auto"
/>
```
**Props:**
- `src` (required) - Image URL (must be absolute)
- `alt` - Alt text for accessibility (defaults to `""`; set a descriptive value for meaningful images)
- `width` - Image width in pixels
- `height` - Image height in pixels
**Best practices:**
- Always use absolute URLs hosted on CDN
- **Meaningful images**: write descriptive `alt` text covering purpose and key details (e.g., `alt="Red bicycle leaning against a brick wall"`, not `alt="image"`)
- **Decorative images** (spacers, dividers, background flourishes): pass an explicit `alt=""` so screen readers skip them cleanly — never omit the attribute
- **Linked images are never decorative.** When `<Img>` sits inside a `<Link>` or `<Button>`, its `alt` must describe where the link goes (e.g., `alt="View order #123"`). An empty `alt=""` on a linked image leaves the link with no accessible name for screen readers
- Specify width and height to prevent layout shift
- Use `block` class to avoid spacing issues
### Hr
Display a divider that separates content areas in your email.
```tsx
import { Hr } from 'react-email';
<Hr className="border-solid border-gray-200 my-5" />
```
## Specialized Components
### CodeBlock
Display code with a selected theme and regex highlighting using Prism.js.
```tsx
import { CodeBlock, dracula } from 'react-email';
const Email = () => {
const code = `export default async (req, res) => {
try {
const html = await render(
<EmailTemplate firstName="John" />
);
return NextResponse.json({ html });
} catch (error) {
return NextResponse.json({ error });
}
}`;
return (
<div className="overflow-auto">
<CodeBlock
fontFamily="monospace"
theme={dracula}
language="javascript"
code={code}
/>
</div>
);
};
```
**Props:**
- `code` (required) - The actual code to render in the code block. Just a plain string, with the proper indentation included
- `language` (required) - The language under the supported languages defined in PrismLanguage (e.g., "javascript", "python", "typescript")
- `theme` (required) - The theme to use for the code block (import from "react-email": dracula, github, nord, etc.)
- `fontFamily` (optional) - The font family to use for the code block (e.g., "monospace")
- `lineNumbers` (optional) - Whether or not to automatically include line numbers on the rendered code block (boolean, default: false)
**Important:**
- By default, do not use the `lineNumbers` prop unless specifically requested
- Always wrap the `CodeBlock` component in a `div` tag with the `overflow-auto` class to avoid padding overflow
### CodeInline
Display a predictable inline code HTML element that works on all email clients.
```tsx
import { Text, CodeInline } from 'react-email';
<Text className="text-base text-gray-800">
Run <CodeInline className="bg-gray-100 px-1 rounded">npm install</CodeInline> to get started.
</Text>
```
### Markdown
A Markdown component that converts markdown to valid react-email template code.
```tsx
import { Html, Markdown } from 'react-email';
const Email = () => {
return (
<Html lang="en" dir="ltr">
<Markdown
markdownCustomStyles={{
h1: { color: "red" },
h2: { color: "blue" },
codeInline: { background: "grey" },
}}
markdownContainerStyles={{
padding: "12px",
border: "solid 1px black",
}}
>{`# Hello, World!`}</Markdown>
{/* OR */}
<Markdown children={`# This is a ~~strikethrough~~`} />
</Html>
);
};
```
**Props:**
- `children` (required) - Markdown string
- `markdownCustomStyles` - Style overrides for HTML elements (h1, h2, p, a, codeInline, etc.)
- `markdownContainerStyles` - Styles for container div
### Font
A React Font component to set your fonts.
```tsx
import { Head, Font } from 'react-email';
<Head>
<Font
fontFamily="Roboto"
fallbackFontFamily="Arial, sans-serif"
webFont={{
url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
format: "woff2"
}}
/>
</Head>
```
**Props:**
- `fontFamily` (required) - Font family name
- `fallbackFontFamily` - Fallback fonts
- `webFont` - Object with `url` and `format`
**Supported formats:**
- woff2 (recommended)
- woff
- truetype
- opentype
references/EDITOR.md›
# React Email Editor Reference
A visual rich-text editor for building email templates, built on [TipTap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/). Embed it in your app to let users compose email-ready HTML without writing code.
## Table of Contents
- [Installation](#installation)
- [CSS Setup](#css-setup)
- [Architecture](#architecture)
- [EmailEditor Component](#emaileditor-component)
- [Minimal Setup (Extensions Only)](#minimal-setup-extensions-only)
- [Bubble Menus](#bubble-menus)
- [Slash Commands](#slash-commands)
- [Inspector](#inspector)
- [Email Theming](#email-theming)
- [Email Export](#email-export)
- [Custom Extensions](#custom-extensions)
## Installation
Install the editor and its peer dependencies:
```sh
npm install @react-email/editor
```
Requires **React 18+** and a bundler that supports [package exports](https://nodejs.org/api/packages.html#exports) (Vite, Next.js, Webpack 5, etc.).
## CSS Setup
Import the bundled default theme for the quickest start:
```tsx
import '@react-email/editor/themes/default.css';
```
This includes the default color theme and built-in UI styles for bubble menus, slash commands, and the inspector.
To import only what you need:
```tsx
import '@react-email/editor/styles/bubble-menu.css';
import '@react-email/editor/styles/slash-command.css';
import '@react-email/editor/styles/inspector.css';
```
## Architecture
The editor is organized into six entry points:
| Import | Purpose |
|--------|---------|
| `@react-email/editor` | `EmailEditor`: the all-in-one component |
| `@react-email/editor/core` | `composeReactEmail` serialization, `EmailNode`, `EmailMark`, event bus, types |
| `@react-email/editor/extensions` | `StarterKit` and 35+ email-aware extensions |
| `@react-email/editor/ui` | `BubbleMenu`, `SlashCommand`, `Inspector` |
| `@react-email/editor/plugins` | `EmailTheming` plugin |
| `@react-email/editor/utils` | Attribute helpers, style utilities |
## EmailEditor Component
The `EmailEditor` component from `@react-email/editor` is a batteries-included component that bundles StarterKit, EmailTheming, BubbleMenus, and SlashCommands. Use it when you want the full experience with minimal setup.
```tsx
import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
import '@react-email/editor/themes/default.css';
import { useRef } from 'react';
export function MyEditor() {
const editorRef = useRef<EmailEditorRef>(null);
const handleExport = async () => {
const { html, text } = await editorRef.current!.export();
console.log(html, text);
};
return (
<div>
<EmailEditor
ref={editorRef}
content="<p>Start typing...</p>"
theme="basic"
onReady={(editor) => console.log('Editor ready', editor)}
onChange={(editor) => console.log('Content changed')}
/>
<button onClick={handleExport}>Export HTML</button>
</div>
);
}
```
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `Content` | — | Initial editor content (HTML string or TipTap JSON) |
| `onChange` | `(editor: Editor) => void` | — | Called on every content change |
| `onUploadImage` | `UploadImageHandler` | — | Handler for pasted/dropped images |
| `onReady` | `(editor: Editor) => void` | — | Called when editor is initialized |
| `theme` | `'basic' \| 'minimal'` | `'basic'` | Built-in email theme |
| `editable` | `boolean` | `true` | Whether content is editable |
| `placeholder` | `string` | — | Placeholder text for empty editor |
| `bubbleMenu` | `{ hideWhenActiveNodes?: string[], hideWhenActiveMarks?: string[] }` | — | Configure bubble menu visibility |
| `extensions` | `Extensions` | — | Override the default extensions entirely |
| `className` | `string` | — | CSS class for the editor container |
### Ref Methods (`EmailEditorRef`)
| Method | Returns | Description |
|--------|---------|-------------|
| `export()` | `Promise<{ html: string; text: string }>` | Export email-ready HTML and plain text |
| `getJSON()` | `JSONContent` | Get editor content as TipTap JSON |
| `getHTML()` | `string` | Get editor content as HTML |
| `editor` | `Editor \| null` | Access the underlying TipTap editor instance |
## Minimal Setup (Extensions Only)
For more control, use `EditorProvider` from `@tiptap/react` directly with `StarterKit`:
```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';
const extensions = [StarterKit];
const content = {
type: 'doc',
content: [
{
type: 'paragraph',
content: [{ type: 'text', text: 'Start typing or edit this text.' }],
},
],
};
export function MyEditor() {
return <EditorProvider extensions={extensions} content={content} />;
}
```
This gives you a content-editable area with all core extensions (paragraphs, headings, lists, tables, code blocks, columns, buttons, etc.) but no UI overlays.
## Bubble Menus
Floating formatting toolbars that appear on text selection. Add as children of `EditorProvider`.
```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';
const extensions = [StarterKit];
export function MyEditor() {
return (
<EditorProvider extensions={extensions} content={content}>
<BubbleMenu />
</EditorProvider>
);
}
```
### Available Bubble Menus
| Component | Appears when... | Controls |
|-----------|----------------|----------|
| `BubbleMenu` | Text is selected | Bold, italic, underline, strike, code, uppercase, alignment, node type, link |
| `BubbleMenu.LinkDefault` | Cursor is on a link | Edit URL, open link, unlink |
| `BubbleMenu.ButtonDefault` | Cursor is on a button | Edit button URL, unlink |
| `BubbleMenu.ImageDefault` | Cursor is on an image | Edit image URL |
Exclude specific items from the default menu:
```tsx
<BubbleMenu excludeItems={['strike', 'code', 'uppercase']} />
```
When combining the text bubble menu with contextual menus for links, images, or buttons, use `hideWhenActiveMarks` on `BubbleMenu` to prevent it from appearing when a link is focused.
## Slash Commands
Insert content blocks by typing `/` in the editor.
```tsx
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';
<EditorProvider extensions={extensions} content={content}>
<SlashCommand items={defaultSlashCommands} />
</EditorProvider>
```
### Default Commands
| Command | Category | Description |
|---------|----------|-------------|
| `TEXT` | Text | Plain text block |
| `H1`, `H2`, `H3` | Text | Headings |
| `BULLET_LIST` | Text | Unordered list |
| `NUMBERED_LIST` | Text | Ordered list |
| `QUOTE` | Text | Block quote |
| `CODE` | Text | Code snippet |
| `BUTTON` | Layout | Clickable button |
| `DIVIDER` | Layout | Horizontal separator |
| `SECTION` | Layout | Content section |
| `TWO_COLUMNS` | Layout | Two column layout |
| `THREE_COLUMNS` | Layout | Three column layout |
| `FOUR_COLUMNS` | Layout | Four column layout |
Cherry-pick individual commands:
```tsx
import { BUTTON, H1, H2, TEXT } from '@react-email/editor/ui';
<SlashCommand items={[TEXT, H1, H2, BUTTON]} />
```
## Inspector
A contextual sidebar for editing document-level styles, node properties, and text formatting. Requires the `EmailTheming` plugin.
```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { Inspector } from '@react-email/editor/ui';
import { EditorContent, EditorContext, useEditor } from '@tiptap/react';
import '@react-email/editor/themes/default.css';
const extensions = [StarterKit, EmailTheming];
export function MyEditor() {
const editor = useEditor({ extensions, content });
return (
<EditorContext.Provider value={{ editor }}>
<div style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>
<EditorContent editor={editor} />
</div>
<Inspector.Root style={{ width: 240, borderLeft: '1px solid #e5e7eb', padding: 16 }}>
<Inspector.Breadcrumb />
<Inspector.Document />
<Inspector.Node />
<Inspector.Text />
</Inspector.Root>
</div>
</EditorContext.Provider>
);
}
```
The inspector automatically switches between document, node, and text controls based on the current selection.
## Email Theming
Apply visual styles (typography, spacing, colors) to email output. Themes are resolved during `composeReactEmail` and inlined as `style` attributes.
```tsx
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
const extensions = [StarterKit, EmailTheming.configure({ theme: 'basic' })];
```
### Built-in Themes
| Theme | Description |
|-------|-------------|
| `'basic'` | Full styling: typography, spacing, borders, visual hierarchy. **Default.** |
| `'minimal'` | Essentially no styles — blank slate for custom themes. |
### Switching Themes Dynamically
```tsx
const [theme, setTheme] = useState<'basic' | 'minimal'>('basic');
const extensions = [StarterKit, EmailTheming.configure({ theme })];
// Re-key EditorProvider when theme changes
<EditorProvider key={theme} extensions={extensions} content={content}>
```
## Email Export
Convert editor content to email-ready HTML and plain text.
### Via EmailEditor ref
```tsx
const editorRef = useRef<EmailEditorRef>(null);
const { html, text } = await editorRef.current!.export();
```
### Via composeReactEmail (lower-level)
```tsx
import { composeReactEmail } from '@react-email/editor/core';
import { useCurrentEditor } from '@tiptap/react';
function ExportPanel() {
const { editor } = useCurrentEditor();
const handleExport = async () => {
if (!editor) return;
const { html, text } = await composeReactEmail({
editor,
preview: 'Inbox preview text', // optional
});
console.log(html, text);
};
return <button onClick={handleExport}>Export HTML</button>;
}
```
The `preview` parameter is optional — when provided, it sets the inbox preview text in the exported HTML.
The export pipeline:
1. Reads the editor's JSON document
2. Traverses each node and mark
3. Calls `renderToReactEmail()` on each `EmailNode` and `EmailMark`
4. Applies theme styles via `EmailTheming` plugin (if configured)
5. Wraps in a base template and renders to HTML string + plain text
## Custom Extensions
Create custom email-compatible nodes using `EmailNode` (extends TipTap's `Node` with `renderToReactEmail()`):
```tsx
import { EmailNode } from '@react-email/editor/core';
import { mergeAttributes } from '@tiptap/core';
const Callout = EmailNode.create({
name: 'callout',
group: 'block',
content: 'inline*',
parseHTML() {
return [{ tag: 'div[data-callout]' }];
},
renderHTML({ HTMLAttributes }) {
return [
'div',
mergeAttributes(HTMLAttributes, {
'data-callout': '',
style: 'padding: 12px 16px; background: #f4f4f5; border-left: 3px solid #1c1c1c;',
}),
0,
];
},
renderToReactEmail({ children, style }) {
return (
<div style={{ ...style, padding: '12px 16px', backgroundColor: '#f4f4f5', borderLeft: '3px solid #1c1c1c' }}>
{children}
</div>
);
},
});
// Register it
const extensions = [StarterKit, Callout];
```
For custom marks (inline formatting), use `EmailMark` from `@react-email/editor/core` — same pattern but for inline elements.
references/I18N.md›
# Internationalization (i18n) Guide
Complete guide for implementing multi-language email support with React Email using Tailwind CSS styling.
## Table of Contents
- [next-intl](#next-intl)
- [react-intl (FormatJS)](#react-intl-formatjs)
- [react-i18next](#react-i18next)
- [Message File Organization](#message-file-organization)
- [Best Practices](#best-practices)
- [Example: Complete Multi-locale Email](#example-complete-multi-locale-email)
React Email officially supports three popular i18n libraries: next-intl, react-i18next, and react-intl.
## next-intl
Best choice for Next.js applications with straightforward API.
### Installation
```bash
npm install next-intl
```
### Setup
**1. Create message files:**
```json
// messages/en.json
{
"welcome-email": {
"subject": "Welcome to Acme",
"greeting": "Hi",
"body": "Thanks for signing up! We're excited to have you on board.",
"cta": "Get Started",
"footer": "If you have questions, reply to this email."
}
}
```
```json
// messages/es.json
{
"welcome-email": {
"subject": "Bienvenido a Acme",
"greeting": "Hola",
"body": "¡Gracias por registrarte! Estamos emocionados de tenerte en la plataforma.",
"cta": "Comenzar",
"footer": "Si tienes preguntas, responde a este correo electrónico."
}
}
```
```json
// messages/fr.json
{
"welcome-email": {
"subject": "Bienvenue chez Acme",
"greeting": "Bonjour",
"body": "Merci de vous être inscrit ! Nous sommes ravis de vous accueillir.",
"cta": "Commencer",
"footer": "Si vous avez des questions, répondez à cet e-mail."
}
}
```
**2. Update email template:**
```tsx
import { createTranslator } from 'next-intl';
import {
Html,
Head,
Preview,
Body,
Container,
Heading,
Text,
Button,
Hr,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface WelcomeEmailProps {
name: string;
verificationUrl: string;
locale: string;
}
export default async function WelcomeEmail({
name,
verificationUrl,
locale
}: WelcomeEmailProps) {
const t = createTranslator({
messages: await import(`../messages/${locale}.json`),
namespace: 'welcome-email',
locale
});
return (
<Html lang={locale}>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-gray-100 font-sans">
<Preview>{t('subject')}</Preview>
<Container className="mx-auto py-10 px-5 max-w-xl">
<Heading className="text-2xl font-bold text-gray-800">
{t('subject')}
</Heading>
<Text className="text-base leading-7 text-gray-800 my-4">
{t('greeting')} {name},
</Text>
<Text className="text-base leading-7 text-gray-800 my-4">
{t('body')}
</Text>
<Button
href={verificationUrl}
className="bg-blue-600 text-white px-5 py-3 rounded block text-center no-underline box-border"
>
{t('cta')}
</Button>
<Hr className="border-solid border-gray-200 my-5" />
<Text className="text-sm text-gray-500">
{t('footer')}
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
// Preview props
WelcomeEmail.PreviewProps = {
name: 'John',
verificationUrl: 'https://example.com/verify',
locale: 'en'
} as WelcomeEmailProps;
```
**3. Send with locale:**
```tsx
await resend.emails.send({
from: 'Acme <[email protected]>',
to: ['[email protected]'],
subject: 'Welcome',
react: <WelcomeEmail name="Jean" verificationUrl="..." locale="fr" />
});
```
## react-intl (FormatJS)
Good choice for complex formatting needs (plurals, dates, numbers).
### Installation
```bash
npm install react-intl
```
### Setup
**1. Create message files:**
```json
// messages/en/welcome-email.json
{
"header": "Welcome to Acme",
"greeting": "Hi",
"body": "Thanks for signing up!",
"cta": "Get Started",
"itemCount": "{count, plural, one {# item} other {# items}}"
}
```
**2. Use in email:**
```tsx
import { createIntl } from 'react-intl';
import {
Html,
Body,
Container,
Text,
Button,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface WelcomeEmailProps {
name: string;
locale: string;
itemCount?: number;
}
export default async function WelcomeEmail({
name,
locale,
itemCount = 1
}: WelcomeEmailProps) {
const { formatMessage } = createIntl({
locale,
messages: await import(`../messages/${locale}/welcome-email.json`)
});
return (
<Html lang={locale}>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Body className="bg-gray-100 font-sans">
<Container className="mx-auto p-5 max-w-xl">
<Text className="text-base text-gray-800">
{formatMessage({ id: 'greeting' })} {name},
</Text>
<Text className="text-base text-gray-800">
{formatMessage({ id: 'body' })}
</Text>
<Text className="text-base text-gray-800">
{formatMessage({ id: 'itemCount' }, { count: itemCount })}
</Text>
<Button
href="https://example.com"
className="bg-blue-600 text-white px-5 py-3 rounded box-border"
>
{formatMessage({ id: 'cta' })}
</Button>
</Container>
</Body>
</Tailwind>
</Html>
);
}
```
## react-i18next
Best for non-Next.js applications or when you need more control.
### Installation
```bash
npm install react-i18next i18next i18next-resources-to-backend
```
### Setup
**1. Configure i18next:**
```js
// i18n.js
import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next';
i18next
.use(initReactI18next)
.use(resourcesToBackend((language, namespace) =>
import(`./messages/${language}/${namespace}.json`)
))
.init({
supportedLngs: ['en', 'es', 'fr', 'de'],
fallbackLng: 'en',
lng: undefined,
preload: ['en', 'es', 'fr', 'de']
});
export { i18next };
```
**2. Create translation helper:**
```js
// get-t.js
import { i18next } from './i18n';
export async function getT(namespace, locale) {
if (locale && i18next.resolvedLanguage !== locale) {
await i18next.changeLanguage(locale);
}
if (namespace && !i18next.hasLoadedNamespace(namespace)) {
await i18next.loadNamespaces(namespace);
}
return {
t: i18next.getFixedT(
locale ?? i18next.resolvedLanguage,
Array.isArray(namespace) ? namespace[0] : namespace
),
i18n: i18next
};
}
```
**3. Create message files:**
```json
// messages/en/welcome-email.json
{
"subject": "Welcome to Acme",
"greeting": "Hi",
"body": "Thanks for signing up!",
"cta": "Get Started"
}
```
```json
// messages/es/welcome-email.json
{
"subject": "Bienvenido a Acme",
"greeting": "Hola",
"body": "¡Gracias por registrarte!",
"cta": "Comenzar"
}
```
**4. Use in email template:**
```tsx
import { getT } from '../get-t';
import {
Html,
Body,
Container,
Heading,
Text,
Button,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface WelcomeEmailProps {
name: string;
locale: string;
}
export default async function WelcomeEmail({ name, locale }: WelcomeEmailProps) {
const { t } = await getT('welcome-email', locale);
return (
<Html lang={locale}>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Body className="bg-gray-100 font-sans">
<Container className="mx-auto p-5 max-w-xl">
<Heading className="text-2xl font-bold text-gray-800">
{t('subject')}
</Heading>
<Text className="text-base text-gray-800">
{t('greeting')} {name},
</Text>
<Text className="text-base text-gray-800">
{t('body')}
</Text>
<Button
href="https://example.com"
className="bg-blue-600 text-white px-5 py-3 rounded box-border"
>
{t('cta')}
</Button>
</Container>
</Body>
</Tailwind>
</Html>
);
}
```
## Message File Organization
### By Namespace (Recommended)
Organize translations by email template:
```
messages/
├── en.json # All English translations
│ ├── welcome-email
│ ├── password-reset
│ └── order-confirmation
├── es.json # All Spanish translations
└── fr.json # All French translations
```
Or organize by template with separate files:
```
messages/
├── en/
│ ├── welcome-email.json
│ ├── password-reset.json
│ └── order-confirmation.json
├── es/
│ ├── welcome-email.json
│ ├── password-reset.json
│ └── order-confirmation.json
└── fr/
├── welcome-email.json
├── password-reset.json
└── order-confirmation.json
```
### Translation Keys
Use descriptive, hierarchical keys:
```json
{
"welcome-email": {
"subject": "Welcome!",
"preview": "Get started with your account",
"header": {
"title": "Welcome to Acme",
"subtitle": "We're glad you're here"
},
"body": {
"greeting": "Hi",
"intro": "Thanks for signing up!",
"next-steps": "Here's how to get started:"
},
"cta": {
"primary": "Get Started",
"secondary": "Learn More"
},
"footer": {
"help": "Need help? Reply to this email",
"unsubscribe": "Unsubscribe from these emails"
}
}
}
```
## Best Practices
### 1. Always Pass Locale
Make locale a required prop:
```tsx
interface EmailProps {
locale: string;
// other props...
}
```
### 2. Set HTML Lang Attribute
```tsx
<Html lang={locale}>
```
### 3. Support RTL Languages
For Arabic, Hebrew, etc.:
```tsx
const isRTL = ['ar', 'he', 'fa'].includes(locale);
<Html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>
```
### 4. Fallback Values
Provide fallback translations:
```tsx
const t = createTranslator({
messages: await import(`../messages/${locale}.json`).catch(() =>
import('../messages/en.json')
),
locale,
namespace: 'welcome-email'
});
```
### 5. Test All Locales
Test email rendering for each supported locale:
```tsx
WelcomeEmail.PreviewProps = {
name: 'Test User',
locale: 'en' // Change to test different locales
} as WelcomeEmailProps;
```
### 6. Keep Keys Consistent
Use the same translation keys across all locale files:
```json
// ✅ Good
// en.json: { "cta": "Get Started" }
// es.json: { "cta": "Comenzar" }
// ❌ Bad
// en.json: { "button": "Get Started" }
// es.json: { "cta": "Comenzar" }
```
### 7. Handle Missing Translations
Set up fallback behavior:
```tsx
// With next-intl
const t = createTranslator({
messages,
locale,
namespace: 'welcome-email',
onError: (error) => {
console.warn('Translation missing:', error);
}
});
```
### 8. Subject Line Translation
Don't forget to translate email subjects:
```tsx
const t = createTranslator({...});
await resend.emails.send({
from: 'Acme <[email protected]>',
to: [user.email],
subject: t('subject'), // ✅ Translated subject
react: <WelcomeEmail {...props} />
});
```
### 9. Format Consistency
Maintain consistent formatting across locales:
- Date formats (MM/DD/YYYY vs DD/MM/YYYY)
- Time formats (12h vs 24h)
- Number separators (1,234.56 vs 1.234,56)
- Currency symbols and placement ($100 vs 100$)
Use `Intl` APIs for automatic locale-specific formatting.
## Example: Complete Multi-locale Email
```tsx
import { createTranslator } from 'next-intl';
import {
Html,
Head,
Preview,
Body,
Container,
Section,
Heading,
Text,
Button,
Hr,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface OrderConfirmationProps {
orderNumber: string;
total: number;
currency: string;
locale: string;
orderDate: Date;
}
export default async function OrderConfirmation({
orderNumber,
total,
currency,
locale,
orderDate
}: OrderConfirmationProps) {
const t = createTranslator({
messages: await import(`../messages/${locale}.json`),
namespace: 'order-confirmation',
locale
});
const isRTL = ['ar', 'he'].includes(locale);
const currencyFormatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency
});
const dateFormatter = new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
});
return (
<Html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-gray-100 font-sans">
<Preview>{t('preview')}</Preview>
<Container className="mx-auto py-10 px-5 max-w-xl">
<Heading className="text-2xl font-bold text-gray-800">
{t('title')}
</Heading>
<Text className="text-base text-gray-800 my-2">
{t('order-number')}: {orderNumber}
</Text>
<Text className="text-base text-gray-800 my-2">
{t('order-date')}: {dateFormatter.format(orderDate)}
</Text>
<Section className="bg-white p-5 rounded my-4">
<Text className="text-xl font-bold text-gray-800">
{t('total')}: {currencyFormatter.format(total)}
</Text>
</Section>
<Button
href={`https://example.com/orders/${orderNumber}`}
className="bg-blue-600 text-white px-5 py-3 rounded block text-center no-underline my-5 box-border"
>
{t('view-order')}
</Button>
<Hr className="border-solid border-gray-200 my-5" />
<Text className="text-sm text-gray-500">
{t('footer')}
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
```
With message files:
```json
// messages/en.json
{
"order-confirmation": {
"preview": "Your order has been confirmed",
"title": "Order Confirmed",
"order-number": "Order number",
"order-date": "Order date",
"total": "Total",
"view-order": "View Order",
"footer": "Thank you for your purchase!"
}
}
```
```json
// messages/es.json
{
"order-confirmation": {
"preview": "Tu pedido ha sido confirmado",
"title": "Pedido Confirmado",
"order-number": "Número de pedido",
"order-date": "Fecha del pedido",
"total": "Total",
"view-order": "Ver Pedido",
"footer": "¡Gracias por tu compra!"
}
}
```
references/PATTERNS.md›
# Common Email Patterns
Real-world examples of common email templates using React Email with Tailwind CSS styling.
## Table of Contents
- [Password Reset Email](#password-reset-email)
- [Order Confirmation with Product List](#order-confirmation-with-product-list)
- [Notification Email with Code Block](#notification-email-with-code-block)
- [Multi-Column Newsletter](#multi-column-newsletter)
- [Team Invitation Email](#team-invitation-email)
## Password Reset Email
```tsx
import {
Html,
Head,
Preview,
Body,
Container,
Heading,
Text,
Button,
Hr,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface PasswordResetProps {
resetUrl: string;
email: string;
expiryHours?: number;
}
export default function PasswordReset({ resetUrl, email, expiryHours = 1 }: PasswordResetProps) {
return (
<Html lang="en">
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-gray-100 font-sans">
<Preview>Reset your password - Action required</Preview>
<Container className="mx-auto py-10 px-5 max-w-xl bg-white">
<Heading className="text-2xl font-bold text-gray-800 mb-5">
Reset Your Password
</Heading>
<Text className="text-base leading-7 text-gray-800 my-4">
A password reset was requested for your account: <strong>{email}</strong>
</Text>
<Text className="text-base leading-7 text-gray-800 my-4">
Click the button below to reset your password. This link expires in {expiryHours} hour{expiryHours > 1 ? 's' : ''}.
</Text>
<Button
href={resetUrl}
className="bg-red-600 text-white px-7 py-3.5 rounded block text-center font-bold my-6 no-underline box-border"
>
Reset Password
</Button>
<Hr className="border-solid border-gray-200 my-6" />
<Text className="text-sm text-gray-500 leading-5 my-2">
If you didn't request this, please ignore this email. Your password will remain unchanged.
</Text>
<Text className="text-sm text-gray-500 leading-5 my-2">
For security, this link will only work once.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
PasswordReset.PreviewProps = {
resetUrl: 'https://example.com/reset/abc123',
email: '[email protected]',
expiryHours: 1
} as PasswordResetProps;
```
## Order Confirmation with Product List
```tsx
import {
Html,
Head,
Preview,
Body,
Container,
Section,
Row,
Column,
Heading,
Text,
Img,
Hr,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface Product {
name: string;
price: number;
quantity: number;
image: string;
sku?: string;
}
interface OrderConfirmationProps {
orderNumber: string;
orderDate: Date;
items: Product[];
subtotal: number;
shipping: number;
tax: number;
total: number;
shippingAddress: {
name: string;
street: string;
city: string;
state: string;
zip: string;
country: string;
};
}
export default function OrderConfirmation({
orderNumber,
orderDate,
items,
subtotal,
shipping,
tax,
total,
shippingAddress
}: OrderConfirmationProps) {
return (
<Html lang="en">
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-gray-100 font-sans">
<Preview>Order #{orderNumber} confirmed - Thank you for your purchase!</Preview>
<Container className="mx-auto py-10 px-5 max-w-xl">
<Heading className="text-3xl font-bold text-gray-800 mb-2">
Order Confirmed
</Heading>
<Text className="text-base text-gray-500 mb-6">Thank you for your order!</Text>
<Section className="bg-gray-50 p-4 rounded mb-6">
<Row>
<Column>
<Text className="text-xs text-gray-500 uppercase mb-1">Order Number</Text>
<Text className="text-base font-bold text-gray-800 m-0">#{orderNumber}</Text>
</Column>
<Column>
<Text className="text-xs text-gray-500 uppercase mb-1">Order Date</Text>
<Text className="text-base font-bold text-gray-800 m-0">{orderDate.toLocaleDateString()}</Text>
</Column>
</Row>
</Section>
<Hr className="border-solid border-gray-200 my-6" />
<Heading as="h2" className="text-xl font-bold text-gray-800 my-4">
Order Items
</Heading>
{items.map((item, index) => (
<Section key={index} className="mb-4">
<Row>
<Column className="w-20 align-top">
<Img
src={item.image}
alt={item.name}
width="80"
height="80"
className="rounded border border-solid border-gray-200"
/>
</Column>
<Column className="align-top pl-4">
<Text className="text-base font-bold text-gray-800 m-0 mb-1">{item.name}</Text>
{item.sku && <Text className="text-sm text-gray-400 m-0 mb-2">SKU: {item.sku}</Text>}
<Text className="text-sm text-gray-500 m-0">
Quantity: {item.quantity} × ${item.price.toFixed(2)}
</Text>
</Column>
<Column className="w-24 text-right align-top">
<Text className="text-base font-bold text-gray-800 m-0">
${(item.quantity * item.price).toFixed(2)}
</Text>
</Column>
</Row>
</Section>
))}
<Hr className="border-solid border-gray-200 my-6" />
<Section className="mt-6">
<Row>
<Column><Text className="text-sm text-gray-500 my-2">Subtotal</Text></Column>
<Column className="text-right">
<Text className="text-sm text-gray-800 my-2">${subtotal.toFixed(2)}</Text>
</Column>
</Row>
<Row>
<Column><Text className="text-sm text-gray-500 my-2">Shipping</Text></Column>
<Column className="text-right">
<Text className="text-sm text-gray-800 my-2">${shipping.toFixed(2)}</Text>
</Column>
</Row>
<Row>
<Column><Text className="text-sm text-gray-500 my-2">Tax</Text></Column>
<Column className="text-right">
<Text className="text-sm text-gray-800 my-2">${tax.toFixed(2)}</Text>
</Column>
</Row>
<Hr className="border-solid border-gray-200 my-3" />
<Row>
<Column><Text className="text-lg font-bold text-gray-800 my-2">Total</Text></Column>
<Column className="text-right">
<Text className="text-lg font-bold text-gray-800 my-2">${total.toFixed(2)}</Text>
</Column>
</Row>
</Section>
<Hr className="border-solid border-gray-200 my-6" />
<Heading as="h2" className="text-xl font-bold text-gray-800 my-4">
Shipping Address
</Heading>
<Section className="bg-gray-50 p-4 rounded">
<Text className="text-sm text-gray-800 my-1">{shippingAddress.name}</Text>
<Text className="text-sm text-gray-800 my-1">{shippingAddress.street}</Text>
<Text className="text-sm text-gray-800 my-1">
{shippingAddress.city}, {shippingAddress.state} {shippingAddress.zip}
</Text>
<Text className="text-sm text-gray-800 my-1">{shippingAddress.country}</Text>
</Section>
<Text className="text-sm text-gray-500 mt-8">
Questions about your order? Reply to this email and we'll help you out.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
OrderConfirmation.PreviewProps = {
orderNumber: '10234',
orderDate: new Date(),
items: [
{
name: 'Vintage Macintosh',
price: 499.00,
quantity: 1,
image: 'https://via.placeholder.com/80',
sku: 'MAC-001'
},
{
name: 'Mechanical Keyboard',
price: 149.99,
quantity: 2,
image: 'https://via.placeholder.com/80',
sku: 'KEY-042'
}
],
subtotal: 798.98,
shipping: 15.00,
tax: 69.42,
total: 883.40,
shippingAddress: {
name: 'John Doe',
street: '123 Main St',
city: 'San Francisco',
state: 'CA',
zip: '94102',
country: 'USA'
}
} as OrderConfirmationProps;
```
## Notification Email with Code Block
```tsx
import {
Html,
Head,
Preview,
Body,
Container,
Section,
Heading,
Text,
CodeBlock,
dracula,
Hr,
Link,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface NotificationProps {
title: string;
message: string;
severity: 'info' | 'warning' | 'error' | 'success';
timestamp: Date;
logData?: string;
actionUrl?: string;
actionLabel?: string;
}
export default function Notification({
title,
message,
severity,
timestamp,
logData,
actionUrl,
actionLabel = 'View Details'
}: NotificationProps) {
const severityColors = {
info: 'bg-sky-500',
warning: 'bg-amber-500',
error: 'bg-red-500',
success: 'bg-green-500'
};
const severityBtnColors = {
info: 'bg-sky-500',
warning: 'bg-amber-500',
error: 'bg-red-500',
success: 'bg-green-500'
};
return (
<Html lang="en">
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-gray-100 font-mono">
<Preview>{title} - {severity}</Preview>
<Container className="mx-auto max-w-xl bg-white border border-solid border-gray-200 rounded overflow-hidden">
<Section className={`h-1 w-full ${severityColors[severity]}`} />
<Heading className="text-2xl font-bold text-gray-800 mx-6 mt-6 mb-4">
{title}
</Heading>
<Text className={`inline-block px-3 py-1 text-xs font-bold text-white rounded-full mx-6 mb-4 ${severityBtnColors[severity]}`}>
{severity.toUpperCase()}
</Text>
<Text className="text-base leading-6 text-gray-800 mx-6 mb-4">
{message}
</Text>
<Text className="text-sm text-gray-500 mx-6 mb-6">
{new Date(timestamp).toLocaleString('en-US', {
dateStyle: 'long',
timeStyle: 'short'
})}
</Text>
{logData && (
<>
<Hr className="border-solid border-gray-200 my-6" />
<Heading as="h2" className="text-lg font-bold text-gray-800 mx-6 my-4">
Log Details
</Heading>
<Section className="overflow-auto mx-6">
<CodeBlock
code={logData}
language="json"
theme={dracula}
/>
</Section>
</>
)}
{actionUrl && (
<>
<Hr className="border-solid border-gray-200 my-6" />
<Link
href={actionUrl}
className={`inline-block px-6 py-3 text-base font-bold text-white rounded no-underline mx-6 mb-6 ${severityBtnColors[severity]}`}
>
{actionLabel}
</Link>
</>
)}
<Hr className="border-solid border-gray-200 my-6" />
<Text className="text-xs text-gray-500 mx-6 mb-6">
This is an automated notification. Please do not reply to this email.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
Notification.PreviewProps = {
title: 'Deployment Failed',
message: 'The deployment to production environment has failed. Please review the logs and take corrective action.',
severity: 'error',
timestamp: new Date(),
logData: `{
"error": "Build failed",
"exit_code": 1,
"duration": "2m 34s",
"commit": "abc123def"
}`,
actionUrl: 'https://example.com/deployments/123',
actionLabel: 'View Deployment'
} as NotificationProps;
```
## Multi-Column Newsletter
```tsx
import {
Html,
Head,
Preview,
Body,
Container,
Section,
Row,
Column,
Heading,
Text,
Img,
Button,
Hr,
Link,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface Article {
title: string;
excerpt: string;
image: string;
url: string;
author: string;
date: string;
}
interface NewsletterProps {
articles: Article[];
unsubscribeUrl: string;
}
export default function Newsletter({ articles, unsubscribeUrl }: NewsletterProps) {
return (
<Html lang="en">
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-white font-sans">
<Preview>Your weekly roundup of the latest articles</Preview>
<Container className="mx-auto max-w-xl">
{/* Header */}
<Section className="pt-10 px-5 pb-5 text-center">
<Img
src="https://via.placeholder.com/150x50?text=Logo"
alt="Company Logo"
width="150"
height="50"
/>
</Section>
<Heading className="text-3xl font-bold text-gray-900 mx-5 mb-4 text-center">
This Week's Highlights
</Heading>
<Text className="text-base leading-6 text-gray-500 mx-5 mb-6 text-center">
Here are the top articles from this week. Enjoy your reading!
</Text>
<Hr className="border-solid border-gray-200 mx-5 my-8" />
{/* Featured Article */}
{articles[0] && (
<Section className="px-5">
<Img
src={articles[0].image}
alt={articles[0].title}
width="600"
className="w-full rounded-lg mb-4"
/>
<Heading as="h2" className="text-2xl font-bold text-gray-900 my-4">
{articles[0].title}
</Heading>
<Text className="text-base leading-6 text-gray-500 my-4">
{articles[0].excerpt}
</Text>
<Text className="text-sm text-gray-400 my-2">
By {articles[0].author} • {articles[0].date}
</Text>
<Button
href={articles[0].url}
className="bg-blue-600 text-white px-6 py-3 rounded font-bold inline-block no-underline box-border"
>
Read More
</Button>
</Section>
)}
<Hr className="border-solid border-gray-200 mx-5 my-8" />
{/* Two-Column Articles */}
{articles.slice(1, 5).length > 0 && (
<>
<Heading as="h2" className="text-2xl font-bold text-gray-900 mx-5 my-4">
More From This Week
</Heading>
{Array.from({ length: Math.ceil(articles.slice(1, 5).length / 2) }).map((_, rowIndex) => {
const leftArticle = articles[1 + rowIndex * 2];
const rightArticle = articles[2 + rowIndex * 2];
return (
<Section key={rowIndex} className="px-5 mb-6">
<Row>
{leftArticle && (
<Column className="w-1/2 align-top px-1">
<Img
src={leftArticle.image}
alt={leftArticle.title}
width="280"
className="w-full rounded mb-3"
/>
<Heading as="h3" className="text-lg font-bold text-gray-900 my-3">
{leftArticle.title}
</Heading>
<Text className="text-sm leading-5 text-gray-500 my-2">
{leftArticle.excerpt}
</Text>
<Link href={leftArticle.url} className="text-sm text-blue-600 no-underline font-semibold">
Read article →
</Link>
</Column>
)}
{rightArticle && (
<Column className="w-1/2 align-top px-1">
<Img
src={rightArticle.image}
alt={rightArticle.title}
width="280"
className="w-full rounded mb-3"
/>
<Heading as="h3" className="text-lg font-bold text-gray-900 my-3">
{rightArticle.title}
</Heading>
<Text className="text-sm leading-5 text-gray-500 my-2">
{rightArticle.excerpt}
</Text>
<Link href={rightArticle.url} className="text-sm text-blue-600 no-underline font-semibold">
Read article →
</Link>
</Column>
)}
</Row>
</Section>
);
})}
</>
)}
<Hr className="border-solid border-gray-200 mx-5 my-8" />
{/* Footer */}
<Section className="bg-gray-50 p-8 mt-8 text-center">
<Text className="text-sm text-gray-500 my-2">
You're receiving this because you subscribed to our newsletter.
</Text>
<Link href={unsubscribeUrl} className="text-sm text-blue-600 underline block my-2">
Unsubscribe from this list
</Link>
<Text className="text-sm text-gray-500 my-2">
© 2026 Company Name. All rights reserved.
</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}
Newsletter.PreviewProps = {
articles: [
{
title: 'The Future of Web Development in 2026',
excerpt: 'Exploring the latest trends and technologies shaping modern web development.',
image: 'https://via.placeholder.com/600x300',
url: 'https://example.com/article-1',
author: 'Jane Doe',
date: 'Jan 15, 2026'
},
{
title: 'React Server Components Explained',
excerpt: 'A deep dive into React Server Components and their benefits.',
image: 'https://via.placeholder.com/280x140',
url: 'https://example.com/article-2',
author: 'John Smith',
date: 'Jan 14, 2026'
},
{
title: 'Building Accessible Web Apps',
excerpt: 'Best practices for creating inclusive digital experiences.',
image: 'https://via.placeholder.com/280x140',
url: 'https://example.com/article-3',
author: 'Sarah Johnson',
date: 'Jan 13, 2026'
}
],
unsubscribeUrl: 'https://example.com/unsubscribe'
} as NewsletterProps;
```
## Team Invitation Email
```tsx
import {
Html,
Head,
Preview,
Body,
Container,
Section,
Heading,
Text,
Button,
Hr,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface TeamInvitationProps {
inviterName: string;
inviterEmail: string;
teamName: string;
role: string;
inviteUrl: string;
expiryDays: number;
}
export default function TeamInvitation({
inviterName,
inviterEmail,
teamName,
role,
inviteUrl,
expiryDays
}: TeamInvitationProps) {
return (
<Html lang="en">
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body className="bg-gray-100 font-sans">
<Preview>You've been invited to join {teamName}</Preview>
<Container className="mx-auto py-10 px-5 max-w-xl bg-white">
<Heading className="text-3xl font-bold text-gray-800 text-center mb-6">
You're Invited!
</Heading>
<Text className="text-base leading-7 text-gray-800 my-4">
<strong>{inviterName}</strong> ({inviterEmail}) has invited you to join the{' '}
<strong>{teamName}</strong> team.
</Text>
<Section className="bg-gray-50 p-5 rounded border border-solid border-gray-200 my-6">
<Text className="text-xs text-gray-500 uppercase font-bold mb-2">Role</Text>
<Text className="text-lg font-bold text-gray-800 m-0">{role}</Text>
</Section>
<Text className="text-base leading-7 text-gray-800 my-4">
Click the button below to accept the invitation and get started.
</Text>
<Button
href={inviteUrl}
className="bg-green-600 text-white px-7 py-3.5 rounded block text-center font-bold text-base my-6 no-underline box-border"
>
Accept Invitation
</Button>
<Hr className="border-solid border-gray-200 my-6" />
<Text className="text-sm text-gray-500 leading-5 my-2">
This invitation will expire in {expiryDays} day{expiryDays > 1 ? 's' : ''}.
</Text>
<Text className="text-sm text-gray-500 leading-5 my-2">
If you weren't expecting this invitation, you can safely ignore this email.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}
TeamInvitation.PreviewProps = {
inviterName: 'John Doe',
inviterEmail: '[email protected]',
teamName: 'Acme Corp Engineering',
role: 'Developer',
inviteUrl: 'https://example.com/invite/abc123',
expiryDays: 7
} as TeamInvitationProps;
```
These patterns demonstrate:
- Tailwind CSS utility classes for styling
- Proper component usage with `pixelBasedPreset`
- TypeScript typing
- Preview props for testing
- Responsive layouts
- Common email scenarios
references/SENDING.md›
# Sending Guide
General guidelines for sending emails with React Email.
Important: Use verified domains in `from` addresses. Ask the user for the verified domain and use it in the `from` address. If the user does not have a verified domain, ask them to verify one with their email service provider.
## Send with Resend (Recommended)
When you have access to the Resend MCP tool:
```typescript
import { render } from 'react-email';
import { WelcomeEmail } from './emails/welcome';
// Render to HTML
const html = await render(
<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
);
// Create plain text version
const text = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />, { plainText: true });
// Use Resend MCP send-email tool with:
// - to: [email protected]
// - subject: Welcome to Acme
// - html: html
// - text: text
```
If no MCP tool is available, you can use the Resend SDK for Node.js to send the email, which can accept React components directly:
```tsx
import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';
const resend = new Resend(process.env.RESEND_API_KEY);
const { data, error } = await resend.emails.send({
from: 'Acme <[email protected]>',
to: ['[email protected]'],
subject: 'Welcome to Acme',
react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});
if (error) {
console.error('Failed to send:', error);
}
```
The Node SDK automatically handles the plain-text rendering and HTML rendering for you.
## Send as a Template to Resend
If preferred, you can upload the email as a template to Resend, which can be used to send emails with the Resend SDK for Node.js:
```bash
npx react-email@latest resend setup
```
This will require the user to provide a Resend API key in the terminal.
Once configured, the user can select a template to send using the UI in the "Resend" tab using the "Upload" button or the "Bulk Upload" button to upload multiple emails at once.
If using a template when sending with the Resend SDK for Node.js, the user can pass the template ID to the `send` method:
```tsx
await resend.emails.send({
from: 'Acme <[email protected]>',
to: ['[email protected]'],
subject: 'Welcome to Acme',
template: {
id: '1245-1256-1234-1234',
}
});
```
## Send with Other Providers
**Nodemailer:**
```tsx
import { render } from 'react-email';
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
host: 'smtp.example.com',
port: 587,
auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS }
});
const html = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />);
await transporter.sendMail({
from: '[email protected]',
to: '[email protected]',
subject: 'Welcome',
html
});
```
**Mailgun:**
```tsx
import { render } from 'react-email';
import FormData from 'form-data';
import Mailgun from 'mailgun.js';
import { WelcomeEmail } from './emails/welcome';
const mailgun = new Mailgun(FormData);
const client = mailgun.client({
username: 'api',
key: process.env.MAILGUN_API_KEY,
});
const html = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />);
await client.messages.create(process.env.MAILGUN_DOMAIN, {
from: '[email protected]',
to: ['[email protected]'],
subject: 'Welcome',
html,
});
```
**SendGrid:**
```tsx
import { render } from 'react-email';
import sgMail from '@sendgrid/mail';
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const html = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />);
await sgMail.send({
to: '[email protected]',
from: '[email protected]',
subject: 'Welcome',
html
});
```references/STYLING.md›
# Styling Guide
Comprehensive styling reference for React Email templates.
## Styling Approach
Use the `Tailwind` component for styling if the project uses Tailwind CSS. Otherwise, use inline styles.
```tsx
import { Tailwind, pixelBasedPreset } from 'react-email';
<Tailwind
config={{
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: '#007bff',
},
},
},
}}
>
{/* Email content */}
</Tailwind>
```
## pixelBasedPreset
Email clients don't support `rem` units. Always use `pixelBasedPreset` in your Tailwind configuration to convert rem-based utilities to pixels:
```tsx
import { pixelBasedPreset } from 'react-email';
<Tailwind config={{ presets: [pixelBasedPreset] }}>
```
## Email Client Limitations
Email clients have significant CSS restrictions. Follow these rules:
### Unsupported Features
- **SVG/WEBP images** - Use PNG or JPEG only
- **Flexbox/Grid** - Use `Row`/`Column` components or tables
- **Media queries** - `sm:`, `md:`, `lg:`, `xl:` prefixes don't work
- **Theme selectors** - `dark:`, `light:` prefixes don't work
- **rem units** - Use `pixelBasedPreset` for pixel conversion
### Border Handling
Always specify border style and reset other sides when needed:
```tsx
// Correct - specify border style
<div className="border-solid border border-gray-300" />
// Correct - single side border with reset
<div className="border-none border-l border-solid border-l-gray-300" />
// Incorrect - missing border style
<div className="border border-gray-300" />
```
## Component Structure
### Head Placement
Always define `<Head />` inside `<Tailwind>` when using Tailwind CSS:
```tsx
<Html>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Head />
<Body>...</Body>
</Tailwind>
</Html>
```
### PreviewProps
Only include props that the component actually uses:
```tsx
const Email = ({ source }: { source: string }) => {
return (
<div>
<a href={source}>Click here</a>
</div>
);
};
Email.PreviewProps = {
source: "https://example.com",
};
```
## Default Layout Structure
### Body
```tsx
<Body className="font-sans py-10 bg-gray-100">
```
### Container
White background, centered, left-aligned content:
```tsx
<Container className="mx-auto bg-white p-6 rounded">
```
### Footer
Include physical address, unsubscribe link, current year:
```tsx
<Section className="text-center text-gray-500 text-sm">
<Text className="m-0">123 Main St, City, State 12345</Text>
<Text className="m-0">© {new Date().getFullYear()} Company Name</Text>
<Link href={unsubscribeUrl}>Unsubscribe</Link>
</Section>
```
## Typography
### Titles
Bold, larger font, larger margins:
```tsx
<Heading className="text-2xl font-bold text-gray-900 mb-4">
```
### Paragraphs
Regular weight, smaller font, smaller margins:
```tsx
<Text className="text-base text-gray-700 mb-3">
```
### Hierarchy
Use consistent spacing that respects content hierarchy. Larger margins for headings, smaller for body text.
## Images
- Only include if user requests
- Content images: use responsive sizing (`w-full`, `h-auto`)
- Small icons (24-48px): fixed dimensions are acceptable
- Never distort user-provided images
- Never create SVG images
- Always use absolute URLs
- Set descriptive `alt` text on meaningful images; pass an explicit `alt=""` on decorative images so screen readers skip them — never omit the attribute
```tsx
{/* Meaningful image — describe purpose and details */}
<Img
src="https://example.com/hero.png"
alt="A team of engineers reviewing code on a laptop"
className="w-full h-auto"
/>
{/* Decorative image — always pass an empty alt string so screen readers skip it */}
<Img
src="https://example.com/divider.png"
alt=""
className="w-full"
/>
```
## Buttons
Always use `box-border` to prevent padding overflow:
```tsx
<Button
href="https://example.com"
className="bg-blue-600 text-white px-5 py-3 rounded box-border block text-center no-underline"
>
Click Here
</Button>
```
## Layout
### Mobile-First
Always design for mobile by default:
- Use stacked layouts that work on all screen sizes
- Max-width around 600px for main container
- Remove default spacing/margins/padding between list items
### Multi-Column
Use `Row` and `Column` components instead of flexbox/grid:
```tsx
<Row>
<Column className="w-1/2">Left content</Column>
<Column className="w-1/2">Right content</Column>
</Row>
```
## Dark Mode
When requested, use dark backgrounds:
- Container: black (`#000`)
- Background: dark gray (`#151516`)
```tsx
<Body className="bg-[#151516]">
<Container className="bg-black text-white">
```
## Colors and Brand Consistency
### Gathering Brand Colors
Before creating emails, collect these colors from the user:
- **Primary**: Main brand color for buttons, links, key accents
- **Secondary**: Supporting color for borders, backgrounds, less prominent elements
- **Text**: Main body text color (suggest `#1a1a1a` for light backgrounds)
- **Text muted**: Secondary text like captions, footers (suggest `#6b7280`)
- **Background**: Email body background (suggest `#f4f4f5`)
- **Surface**: Container/card background (typically `#ffffff`)
### Tailwind Configuration File
Create a centralized Tailwind config file that all email templates import. Using `satisfies TailwindConfig` provides intellisense support for all configuration options:
```tsx
// emails/tailwind.config.ts
import { pixelBasedPreset, type TailwindConfig } from 'react-email';
export default {
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: {
primary: '#007bff',
secondary: '#6c757d',
},
},
},
},
} satisfies TailwindConfig;
// For non-Tailwind brand assets (optional)
export const brandAssets = {
logo: {
src: 'https://example.com/logo.png',
alt: 'Company Name',
width: 120,
},
};
```
### Using Tailwind Config
Import the shared config in every email template:
```tsx
import tailwindConfig, { brandAssets } from './tailwind.config';
<Tailwind config={tailwindConfig}>
<Body className="bg-gray-100 font-sans">
<Container className="bg-white p-6">
<Img src={brandAssets.logo.src} alt={brandAssets.logo.alt} width={brandAssets.logo.width} />
<Button className="bg-brand-primary text-white">Action</Button>
</Container>
</Body>
</Tailwind>
```
### Maintaining Consistency
- **Always use the brand config** - Never hardcode colors in individual templates
- **Update config, not templates** - When colors change, update `tailwind.config.ts` only
- **Use semantic names** - `bg-brand-primary` not `bg-[#007bff]`
- **Ensure contrast** - Test that text is readable against backgrounds (WCAG AA: 4.5:1 ratio)
## Asset Locations
Direct users to place brand assets in appropriate locations:
- **Logo and images**: Host on a CDN or public URL. For local development, place in `emails/static/`.
- **Custom fonts**: Use the `Font` component with a web font URL (Google Fonts, Adobe Fonts, or self-hosted).
**Example prompt for gathering brand info:**
> "Before I create your email template, I need some brand information to ensure consistency. Could you provide:
> 1. Your primary brand color (hex code, e.g., #007bff)
> 2. Your logo URL (must be a publicly accessible PNG or JPEG)
> 3. Any secondary colors you'd like to use
> 4. Style preference (modern/minimal or classic/traditional)"
## Best Practices
1. **Make templates unique** - Not generic, tailored to user's request
2. **Test across clients** - Gmail, Outlook, Apple Mail, Yahoo Mail
3. **Keep file size under 102KB** - Gmail clips larger emails
4. **Use keywords strategically** - Increase engagement in email body
5. **Inline styles as fallback** - Some clients strip `<style>` tags
SKILL.md›
---
name: react-email
description: Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
license: MIT
metadata:
author: Resend
version: "2.1.0"
homepage: https://react.email
source: https://github.com/resend/react-email
openclaw:
install:
- kind: node
package: react-email
label: React Email
links:
repository: https://github.com/resend/react-email
documentation: https://resend.com/docs/react-email-skill
---
# React Email
Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.
## Installation
```sh
npm i react-email
```
Or scaffold a new project:
```sh
npx create-email@latest
cd react-email-starter
npm install
npm run dev
```
This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.
The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.
### Adding to an Existing Project
Install the packages and add a script to your `package.json`:
```json
{
"scripts": {
"email": "email dev --dir emails --port 3000"
}
}
```
Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.
## Basic Email Template
Create an email component with proper structure using the Tailwind component for styling:
```tsx
import {
Html,
Head,
Preview,
Body,
Container,
Heading,
Text,
Button,
Tailwind,
pixelBasedPreset
} from 'react-email';
interface WelcomeEmailProps {
name: string;
verificationUrl: string;
}
export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
return (
<Html lang="en">
<Tailwind
config={{
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: '#007bff',
},
},
},
}}
>
<Head />
<Body className="bg-gray-100 font-sans">
<Preview>Welcome - Verify your email</Preview>
<Container className="max-w-xl mx-auto p-5">
<Heading className="text-2xl text-gray-800">
Welcome!
</Heading>
<Text className="text-base text-gray-800">
Hi {name}, thanks for signing up!
</Text>
<Button
href={verificationUrl}
className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
>
Verify Email
</Button>
</Container>
</Body>
</Tailwind>
</Html>
);
}
// Preview props for testing
WelcomeEmail.PreviewProps = {
name: 'John Doe',
verificationUrl: 'https://example.com/verify/abc123'
} satisfies WelcomeEmailProps;
export { WelcomeEmail };
```
## Behavioral Guidelines
- When iterating over the code, only update what the user asked for. Keep the rest intact.
- If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach.
- Never use template variables (like `{{name}}`) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for `{{variableName}}`, place the mustache string only in PreviewProps, never in the component JSX:
```typescript
const EmailTemplate = (props) => {
return (
<h1>Hello, {props.variableName}!</h1>
);
}
EmailTemplate.PreviewProps = {
variableName: "{{variableName}}",
};
export default EmailTemplate;
```
- Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid.
## Essential Components
See [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation.
**Core Structure:**
- `Html` - Root wrapper with `lang` attribute
- `Head` - Meta elements, styles, fonts
- `Body` - Main content wrapper
- `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email.
- `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`.
- `Row` & `Column` - Multi-column layouts
- `Tailwind` - Enables Tailwind CSS utility classes
**Content:**
- `Preview` - Inbox preview text, always first inside `<Body>`
- `Heading` - h1-h6 headings
- `Text` - Paragraphs
- `Button` - Styled link buttons (always include `box-border`)
- `Link` - Hyperlinks
- `Img` - Images (see Static Files section below)
- `Hr` - Horizontal dividers
**Specialized:**
- `CodeBlock` - Syntax-highlighted code
- `CodeInline` - Inline code
- `Markdown` - Render markdown
- `Font` - Custom web fonts
## Before Writing Code
When a user requests an email template, ask clarifying questions FIRST if they haven't provided:
1. **Brand colors** - Ask for primary brand color (hex code like #007bff)
2. **Logo** - Ask if they have a logo file and its format (PNG/JPG only - warn if SVG/WEBP)
3. **Style preference** - Professional, casual, or minimal tone
4. **Production URL** - Where will static assets be hosted in production?
## Static Files and Images
### Directory Structure
Local images must be placed in the `static` folder inside your emails directory:
```
project/
├── emails/
│ ├── welcome.tsx
│ └── static/ <-- Images go here
│ └── logo.png
```
### Dev vs Production URLs
Use this pattern for images that work in both dev preview and production:
```tsx
const baseURL = process.env.NODE_ENV === "production"
? "https://cdn.example.com" // User's production CDN
: "";
export default function Email() {
return (
<Img
src={`${baseURL}/static/logo.png`}
alt="Logo"
width="150"
height="50"
/>
);
}
```
**How it works:**
- **Development:** `baseURL` is empty, so URL is `/static/logo.png` - served by React Email's dev server
- **Production:** `baseURL` is the CDN domain, so URL is `https://cdn.example.com/static/logo.png`
**Important:** Always ask the user for their production hosting URL. Do not hardcode `localhost:3000`.
## Styling
See [references/STYLING.md](references/STYLING.md) for comprehensive styling documentation including typography, layout patterns, dark mode, and brand consistency.
### Key Rules
- Use `Tailwind` with `pixelBasedPreset` (email clients don't support `rem`). Import `pixelBasedPreset` from `react-email`.
- Never use flexbox or grid — use `Row`/`Column` components or tables for layouts.
- Avoid CSS/Tailwind media queries (`sm:`, `md:`, `lg:`, `xl:`) — limited email client support.
- Never use theme selectors (`dark:`, `light:`) — not supported.
- Never use SVG or WEBP images — warn users about rendering issues.
- Always specify border type (`border-solid`, `border-dashed`, etc.) — email clients don't inherit it.
- For single-side borders, reset others first (`border-none border-l border-solid`).
### Required Classes
| Component | Required Class | Why |
|-----------|---------------|-----|
| `Button` | `box-border` | Prevents padding from overflowing the button width |
| `Hr` / any border | `border-solid` (or `border-dashed`, etc.) | Email clients don't inherit border type |
| Single-side borders | `border-none` + the side | Resets default borders on other sides |
### Structure Notes
- Always define `<Head />` inside `<Tailwind>` when using Tailwind CSS
- `<Preview>` should always be the first element inside `<Body>`
- Only include props in `PreviewProps` that the component actually uses
- Use fixed width/height for known-size elements (logos, icons); responsive sizing (`w-full`, `h-auto`) for content images
## Rendering
### Convert to HTML
```tsx
import { render } from 'react-email';
import { WelcomeEmail } from './emails/welcome';
const html = await render(
<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
);
```
### Convert to Plain Text
```tsx
const text = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />, { plainText: true });
```
## Sending
React Email supports sending with any email service provider. See [references/SENDING.md](references/SENDING.md) for complete sending documentation including Resend, Nodemailer, and SendGrid examples.
Quick example using the Resend SDK:
```tsx
import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';
const resend = new Resend(process.env.RESEND_API_KEY);
const { data, error } = await resend.emails.send({
from: 'Acme <[email protected]>',
to: ['[email protected]'],
subject: 'Welcome to Acme',
react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});
```
The Resend Node SDK automatically handles both HTML and plain-text rendering.
## CLI Commands
The `react-email` package provides a CLI accessible via the `email` command:
| Command | Description |
|---------|-------------|
| `email dev --dir <path> --port <port>` | Start the preview development server (default: `./emails`, port 3000) |
| `email build --dir <path>` | Build the preview app for production deployment |
| `email start` | Run the built preview app |
| `email export --outDir <path> --pretty --plainText --dir <path>` | Export templates to static HTML files |
| `email resend setup` | Connect the CLI to your Resend account via API key |
| `email resend reset` | Remove the stored Resend API key |
## Internationalization
See [references/I18N.md](references/I18N.md) for complete i18n documentation. React Email supports three libraries: next-intl, react-i18next, and react-intl.
## Email Editor
React Email includes a visual editor (`@react-email/editor`) that can be embedded in your app. It's built on TipTap/ProseMirror and produces email-ready HTML.
See [references/EDITOR.md](references/EDITOR.md) for complete documentation including:
- `EmailEditor` — batteries-included component with bubble menus, slash commands, and theming
- `StarterKit` — 35+ email-aware extensions (headings, lists, tables, columns, buttons, etc.)
- `Inspector` — contextual sidebar for editing styles
- `EmailTheming` — built-in themes (`basic`, `minimal`) with customizable CSS properties
- `composeReactEmail` — export editor content to email-ready HTML and plain text
- Custom extensions via `EmailNode` and `EmailMark`
Quick example:
```tsx
import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
import '@react-email/editor/themes/default.css';
import { useRef } from 'react';
export function MyEditor() {
const ref = useRef<EmailEditorRef>(null);
return (
<EmailEditor
ref={ref}
content="<p>Start typing...</p>"
theme="basic"
/>
);
}
```
## Common Patterns
See [references/PATTERNS.md](references/PATTERNS.md) for complete examples including:
- Password reset emails
- Order confirmations with product lists
- Notification emails with code blocks
- Multi-column layouts
- Team invitation emails
## Email Best Practices
1. **Test across email clients** - Gmail, Outlook, Apple Mail, Yahoo Mail
2. **Keep it responsive** - Max-width around 600px, test on mobile
3. **Use absolute image URLs** - Host on reliable CDN
4. **Write meaningful alt text** - Describe purpose and details for content images; use `alt=""` for decorative images (spacers, dividers, background flourishes). React Email's `<Img>` defaults to `alt=""`.
5. **Provide plain text version** - Required for accessibility
6. **Keep file size under 102KB** - Gmail clips larger emails
7. **Add proper TypeScript types** - Define interfaces for all email props
8. **Include preview props** - Add `.PreviewProps` for development testing
9. **Use verified domains** - For production `from` addresses
### Accessibility
React Email handles the structural defaults; the rest is content.
**What React Email gives you for free:**
- `<Html>` sets `lang` and `dir` (defaults: `lang="en" dir="ltr"` — override per locale)
- `<Img>` defaults to `alt=""` so decorative images are skipped by screen readers
- `<Markdown>` renders layout tables with `role="presentation"`
- `<Preview>` also emits a `<title>` tag
Upgrade with `npm install react-email@latest` to get these defaults.
**What you still have to do (content choices):**
- Open with a single `<Heading as="h1">`, nest subheadings in order, never skip levels (very short SMS-style emails may skip the heading entirely)
- Set descriptive `alt` on meaningful images; pass an explicit `alt=""` on decorative images — never omit the attribute
- **Linked images are never decorative.** When an `<Img>` is inside a `<Link>` or `<Button>`, the `alt` must describe where the link goes — `alt=""` on a linked image leaves the link with no accessible name
- Write link text that describes the destination (`<Button>Read the report</Button>`, not `click here`)
- Hit 4.5:1 text contrast (WCAG AA); preview in dark mode
- For layout tables you build by hand (outside `<Markdown>`), add `role="presentation"`
- For non-English emails, pass the locale: `<Html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>` (see [I18N.md](references/I18N.md))
For the full rule set, severity ranking, and authoring checklist, see the [accessibility reference](https://github.com/resend/email-best-practices/blob/main/references/accessibility.md) in the `email-best-practices` skill.
## Additional Resources
- [React Email Documentation](https://react.email/docs/llms.txt)
- [React Email GitHub](https://github.com/resend/react-email)
- [Resend Documentation](https://resend.com/docs/llms.txt)
- [Email Client CSS Support](https://www.caniemail.com)
- Component Reference: [references/COMPONENTS.md](references/COMPONENTS.md)
- Styling Guide: [references/STYLING.md](references/STYLING.md)
- Email Editor: [references/EDITOR.md](references/EDITOR.md)
- Sending Guide: [references/SENDING.md](references/SENDING.md)
- Internationalization Guide: [references/I18N.md](references/I18N.md)
- Common Patterns: [references/PATTERNS.md](references/PATTERNS.md)