React Email

Build type-safe, reusable transactional email templates using React components. Render to HTML and send via Resend.

When to Use This Skill

• Building transactional email templates (welcome, billing, alerts, etc.)
• Setting up Resend for email delivery
• Creating shared email layouts (headers, footers, branding)
• Previewing emails during development
• Sending emails from Next.js Server Actions or Route Handlers

Core Concepts

Why React Email (not MJML or drag-and-drop editors)?

• React components — reuse patterns you already know (props, imports, composition)
• Shared layouts — headers/footers via standard imports (no editor symbols or paid tiers)
• Type-safe props — replace fragile {{merge_tag}} strings with TypeScript interfaces
• Built by Resend — seamless integration with the sending API
• Preview server — fast iteration without sending real emails
• Version controlled — testable, reviewable in PRs, diffable

Package Setup

# Core (production)
pnpm add @react-email/components @react-email/render resend

# Dev tools (preview server)
pnpm add -D react-email

Add script to package.json:

{
  "scripts": {
    "email:dev": "email dev --dir emails --port 3001"
  }
}

Directory Convention

emails/
  _components/       # Shared parts (layout, header, footer)
    layout.tsx
  welcome.tsx        # Individual templates
  invoice.tsx
  password-reset.tsx

• emails/ lives at the project root (peer to app/, lib/)
• _components/ prefix keeps shared parts separate from sendable templates
• The preview server (email dev) scans emails/ and shows each .tsx as a preview

Preview Server

pnpm email:dev

Opens at http://localhost:3001 with:

• Live preview of all templates in emails/
• Hot reload on file changes
• Source view (HTML output)
• Mobile/desktop width toggle
• Each template's PreviewProps shown as default data

Environment Variables

# .env.local
RESEND_API_KEY=re_xxxxxxxxxxxx
RESEND_FROM_EMAIL=noreply@yourdomain.com

Reference: Read references/react-email-patterns.md for all code examples: layout component, typed props, rendering, Resend sending, Next.js integration (Server Actions and Route Handlers), available components table, styling rules, testing patterns, and common patterns (conditional content, data tables, CTA buttons).