DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free Email API — Send Transactional Emails with React Components as Templates

#email #resend #react #webdev

Why Resend?

Resend lets you build email templates as React components and send them via API. No more HTML tables and inline styles.

npm install resend @react-email/components
Enter fullscreen mode Exit fullscreen mode

Send an Email 

import { Resend } from 'resend'

const resend = new Resend('re_123456789')

await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome!',
  html: '<h1>Welcome to our app!</h1>',
})
Enter fullscreen mode Exit fullscreen mode

React Email Templates 

import { Html, Head, Body, Container, Heading, Text, Button } from '@react-email/components'

export function WelcomeEmail({ name, loginUrl }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif' }}>
        <Container>
          <Heading>Welcome, {name}!</Heading>
          <Text>Thanks for signing up. Click below to get started.</Text>
          <Button href={loginUrl} style={{ background: '#000', color: '#fff', padding: '12px 24px' }}>
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  )
}
Enter fullscreen mode Exit fullscreen mode

Send React Template 

import { WelcomeEmail } from './emails/welcome'

await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome!',
  react: <WelcomeEmail name="John" loginUrl="https://app.com/login" />,
})
Enter fullscreen mode Exit fullscreen mode

Resend vs SendGrid vs Mailgun

Feature Resend SendGrid Mailgun
Templates React Handlebars Handlebars
Free tier 3K/mo 100/day 5K/mo
DX Excellent Good Good
Webhooks Yes Yes Yes

Need to extract data from any website at scale? I build custom web scrapers — 77 production scrapers running on Apify Store. Email me at spinov001@gmail.com for a tailored solution.

Top comments (0)