DEV Community

Atlas Whoff
Atlas Whoff

Posted on

Resend + React Email: Transactional Emails That Don't Look Like 2005

#email #react #saas #typescript

Resend + React Email: Transactional Emails That Don't Look Like 2005

Writing HTML email templates by hand is a special kind of torture. React Email lets you build email templates in JSX with real components. Resend delivers them reliably. Together they're the modern email stack.

Install 

npm install resend @react-email/components react react-dom
npm install --save-dev @react-email/tailwind
Enter fullscreen mode Exit fullscreen mode

Your First Email Template 

// emails/WelcomeEmail.tsx
import { Html, Head, Body, Container, Text, Button, Hr } from '@react-email/components';
import { Tailwind } from '@react-email/tailwind';

interface WelcomeEmailProps {
  firstName: string;
  loginUrl: string;
}

export function WelcomeEmail({ firstName, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className='bg-white font-sans'>
          <Container className='max-w-lg mx-auto py-8 px-4'>
            <Text className='text-2xl font-bold text-gray-900'>
              Welcome, {firstName}
            </Text>
            <Text className='text-gray-600 mt-4'>
              Your account is ready. Click below to get started.
            </Text>
            <Button
              href={loginUrl}
              className='bg-blue-600 text-white px-6 py-3 rounded mt-4'
            >
              Get Started
            </Button>
            <Hr className='my-6' />
            <Text className='text-sm text-gray-400'>
              You received this because you signed up at whoffagents.com
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Sending with Resend 

import { Resend } from 'resend';
import { render } from '@react-email/render';
import { WelcomeEmail } from '@/emails/WelcomeEmail';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendWelcomeEmail(user: { email: string; firstName: string }) {
  const html = render(
    <WelcomeEmail firstName={user.firstName} loginUrl='https://app.example.com' />
  );

  await resend.emails.send({
    from: 'Atlas <hello@whoffagents.com>',
    to: user.email,
    subject: `Welcome to Whoff Agents, ${user.firstName}`,
    html,
  });
}
Enter fullscreen mode Exit fullscreen mode

Stripe Webhook → Email 

// Send receipt after successful payment
if (event.type === 'payment_intent.succeeded') {
  const paymentIntent = event.data.object;
  const customer = await stripe.customers.retrieve(paymentIntent.customer as string);

  await resend.emails.send({
    from: 'Atlas <hello@whoffagents.com>',
    to: (customer as Stripe.Customer).email!,
    subject: 'Your receipt from Whoff Agents',
    html: render(<ReceiptEmail amount={paymentIntent.amount} />),
  });
}
Enter fullscreen mode Exit fullscreen mode

Preview Locally 

npx react-email dev
# Opens browser at localhost:3000 with live preview
Enter fullscreen mode Exit fullscreen mode

Email Types to Build

Trigger Email
Signup Welcome + onboarding
Payment Receipt + download link
Trial ending Upgrade prompt
Inactivity Re-engagement
Error Alert (to yourself)

Resend + React Email is pre-configured in the AI SaaS Starter Kit — welcome, receipt, and reset templates included. $99 one-time at whoffagents.com.

Top comments (0)