Tutorial

Send Beautiful Emails with React

Learn how to use React Email with Postflare to build and send pixel-perfect transactional emails.

Postflare Team

Building beautiful, responsive emails has always been a pain. Between inconsistent email client rendering and the limitations of HTML email, developers often resort to tables-within-tables hacks from the early 2000s.

React Email changes all of that — and it works seamlessly with Postflare.

Why React Email?

React Email lets you write email templates using familiar React components. No more wrestling with inline styles and table layouts:

  • Component-based — Reuse layouts, buttons, and sections across templates
  • Type-safe — Full TypeScript support with auto-completion
  • Preview — Live preview in the browser as you develop
  • Responsive — Built-in components that render correctly across email clients

Quick Setup

Install the dependencies:

npm install react-email @react-email/components resend

Create Your First Template

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

export default function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', background: '#f6f9fc' }}>
        <Container style={{ maxWidth: '480px', margin: '0 auto', padding: '20px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
            Welcome, {name}! 👋
          </Text>
          <Text>
            Thanks for signing up for Postflare. We're excited to have you on board.
          </Text>
          <Button
            href="https://app.postflare.app"
            style={{
              background: '#000',
              color: '#fff',
              padding: '12px 24px',
              borderRadius: '6px',
              textDecoration: 'none',
            }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Send It with Postflare

// Postflare is Resend-compatible — use the Resend SDK
import { Resend } from 'resend';
import WelcomeEmail from './emails/welcome';

const resend = new Resend('re_xxxxxxxxx');

await resend.emails.send({
  from: 'Acme <hello@acme.com>',
  to: ['user@example.com'],
  subject: 'Welcome to Acme!',
  react: WelcomeEmail({ name: 'John' }),
});

That's it — a type-safe, beautifully rendered email sent through Postflare's global edge network.

Next Steps