Documentation

Complete guide to using your React email templates effectively.

Quick Start

1. Download & Extract

After purchase, download the template bundle and extract all files to your project directory.

2. Choose Your Implementation

• React Email: Use .tsx components with React Email
• HTML: Use static HTML files directly
• Hybrid: Mix both approaches as needed

3. Customize & Deploy

Modify colors, content, and styling to match your brand, then integrate with your email service.

Template Structure

email-templates/
├── components/           # React Email components
│   ├── welcome.tsx
│   ├── reset-password.tsx
│   └── invoice.tsx
├── html/                # Static HTML versions
│   ├── welcome.html
│   ├── reset-password.html
│   └── invoice.html
├── assets/              # Images and resources
└── README.md           # Detailed instructions

React Email Integration

Installation

npm install react-email @react-email/components

Basic Usage

import { render } from '@react-email/render';
import { WelcomeEmail } from './templates/welcome';

// Generate HTML
const emailHtml = render(
  <WelcomeEmail 
    userName="John Doe"
    loginUrl="https://app.example.com"
  />
);

// Send with your email service
await sendEmail({
  to: 'user@example.com',
  subject: 'Welcome!',
  html: emailHtml
});

Props & Customization

Each template accepts props for dynamic content:

<WelcomeEmail 
  userName="John Doe"           // User's name
  companyName="Your Company"    // Your company name
  loginUrl="https://..."        // Call-to-action URL
  supportEmail="help@..."       // Support contact
/>

HTML Implementation

For direct HTML usage:

1. Copy HTML: Use the HTML version from the /html folder
2. Replace Placeholders: Update {{userName}} style placeholders
3. Host Images: Upload images to your CDN
4. Test Thoroughly: Verify across email clients

Styling Guidelines

Colors

Templates use CSS custom properties for easy theming:

:root {
  --primary-color: #0066cc;
  --text-color: #333333;
  --background-color: #ffffff;
}

Fonts

We use web-safe font stacks:

• Headings: -apple-system, BlinkMacSystemFont, 'Segoe UI'
• Body: Georgia, 'Times New Roman', serif
• Code: 'Courier New', monospace

Images

• Format: Use PNG or JPG
• Size: Optimize for web (< 100KB per image)
• Hosting: Use reliable CDN (Cloudinary, AWS S3)
• Alt Text: Always include descriptive alt attributes

Email Service Integration

Resend

import { Resend } from 'resend';

const resend = new Resend('your-api-key');

await resend.emails.send({
  from: 'noreply@yourapp.com',
  to: 'user@example.com',
  subject: 'Welcome!',
  react: <WelcomeEmail userName="John" />
});

SendGrid

const sgMail = require('@sendgrid/mail');

const msg = {
  to: 'user@example.com',
  from: 'noreply@yourapp.com',
  subject: 'Welcome!',
  html: emailHtml,
};

await sgMail.send(msg);

Nodemailer

const transporter = nodemailer.createTransporter({...});

await transporter.sendMail({
  from: 'noreply@yourapp.com',
  to: 'user@example.com',
  subject: 'Welcome!',
  html: emailHtml
});

Testing

Preview Tools

• React Email: Built-in preview server
• Litmus: Professional email testing
• Email on Acid: Cross-client testing

Manual Testing

Send test emails to:

• Gmail (web, mobile)
• Outlook (desktop, web)
• Apple Mail
• Your target email clients

Best Practices

Content

• Keep it concise: Mobile users scan quickly
• Clear CTAs: Make actions obvious
• Personal touch: Use recipient's name
• Value first: Lead with benefits

Technical

• Inline CSS: Better client support
• Table layouts: More reliable than divs
• Alt text: For accessibility
• Fallback fonts: When custom fonts fail

Deliverability

• Authenticate: Set up SPF, DKIM, DMARC
• Clean lists: Remove bounced emails
• Test subject lines: Avoid spam triggers
• Monitor metrics: Track opens, clicks, bounces

Troubleshooting

Common Issues

• Images not loading: Check image URLs and hosting
• Layout broken: Verify HTML structure and CSS
• Fonts not rendering: Use web-safe fallbacks
• Dark mode issues: Test in dark mode clients

Getting Help

• Documentation: Check included README files
• Support: Email support@reactemailtemplates.com
• Community: Join our Discord for tips and tricks

---

This documentation covers the essentials. For specific questions, don't hesitate to reach out to our support team.