DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free API: Send Beautiful Emails with React Components

#email #react #typescript #webdev

What is Resend?

Resend is a modern email API built for developers. Send transactional emails using React components as templates — no more HTML tables, inline styles, or email client compatibility nightmares. And it comes with a generous free tier.

Why Resend?

  • Free tier — 3,000 emails/month, 100 emails/day
  • React Email — write email templates as React components
  • Simple API — send an email in 3 lines of code
  • Built-in analytics — open rates, click rates, bounces
  • Webhooks — get notified on delivery, bounce, complaint
  • Custom domains — professional from addresses

Quick Start 

npm install resend
Enter fullscreen mode Exit fullscreen mode 
import { Resend } from 'resend';

const resend = new Resend('re_your_api_key');

const { data, error } = await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: ['user@example.com'],
  subject: 'Welcome to our platform!',
  html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>'
});
Enter fullscreen mode Exit fullscreen mode

React Email Templates 

npm install @react-email/components
Enter fullscreen mode Exit fullscreen mode 
// emails/welcome.tsx
import {
  Html, Head, Body, Container, Section,
  Text, Button, Img, Hr
} from '@react-email/components';

export function WelcomeEmail({ name, loginUrl }: { name: string; loginUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'Arial, sans-serif', backgroundColor: '#f4f4f5' }}>
        <Container style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
          <Img src="https://yourapp.com/logo.png" width={120} height={40} alt="Logo" />
          <Section style={{ backgroundColor: 'white', borderRadius: '8px', padding: '32px' }}>
            <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
              Welcome, {name}!
            </Text>
            <Text style={{ color: '#666', lineHeight: '1.6' }}>
              We are excited to have you on board. Get started by exploring
              your dashboard.
            </Text>
            <Button
              href={loginUrl}
              style={{
                backgroundColor: '#000',
                color: '#fff',
                padding: '12px 24px',
                borderRadius: '6px',
                textDecoration: 'none'
              }}
            >
              Go to Dashboard
            </Button>
          </Section>
          <Hr />
          <Text style={{ color: '#999', fontSize: '12px' }}>
            You received this because you signed up at ourapp.com
          </Text>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Send with React Template 

import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend('re_your_api_key');

await resend.emails.send({
  from: 'hello@yourapp.com',
  to: ['user@example.com'],
  subject: 'Welcome to Our Platform!',
  react: WelcomeEmail({ name: 'Alex', loginUrl: 'https://app.yourapp.com/login' })
});
Enter fullscreen mode Exit fullscreen mode

Batch Sending 

const { data } = await resend.batch.send([
  {
    from: 'hello@yourapp.com',
    to: ['user1@example.com'],
    subject: 'Your weekly report',
    react: WeeklyReport({ userId: '1' })
  },
  {
    from: 'hello@yourapp.com',
    to: ['user2@example.com'],
    subject: 'Your weekly report',
    react: WeeklyReport({ userId: '2' })
  }
]);
Enter fullscreen mode Exit fullscreen mode

Resend vs Alternatives

Feature Resend SendGrid AWS SES Mailgun
Free tier 3K/month 100/day 62K/month (12mo) 5K for 3mo
React templates Native None None None
API simplicity 3 lines 10+ lines Complex SDK 5 lines
Analytics Built-in Dashboard CloudWatch Dashboard
Webhooks Yes Yes SNS Yes
Setup time 5 minutes 30 minutes 1 hour 15 minutes

Real-World Impact

A team maintained 40 email templates as raw HTML — each was 300+ lines of nested tables and inline styles. Updating the logo across all templates took a full day. After migrating to React Email + Resend: shared components (Header, Footer, Button), logo update = 1 line change. Template creation time dropped from 4 hours to 20 minutes.

Building transactional email systems? I help teams implement modern email infrastructure. Contact spinov001@gmail.com or explore my data tools on Apify.

Top comments (0)