React Email Templates

React Email is a collection of high-quality, unstyled React components for building clean, cross-client responsive emails. You can seamlessly render React Email components to HTML and dispatch them via Mailofly.

1. Install Dependencies

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

2. Create a React Email Component

emails/welcome-email.tsx

import {
  Html,
  Head,
  Body,
  Container,
  Text,
  Button,
  Heading,
} from "@react-email/components";
import * as React from "react";

interface WelcomeEmailProps {
  name: string;
}

export function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif", backgroundColor: "#f9fafb" }}>
        <Container style={{ padding: "20px", maxWidth: "560px" }}>
          <Heading>Welcome to Acme, {name}!</Heading>
          <Text>We are excited to have you on board.</Text>
          <Button
            href="https://acme.com/dashboard"
            style={{
              backgroundColor: "#000",
              color: "#fff",
              padding: "12px 20px",
              borderRadius: "6px",
              textDecoration: "none",
            }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

3. Render and Send via Mailofly

import { render } from "@react-email/components";
import { Mailofly } from "mailofly";
import { WelcomeEmail } from "./emails/welcome-email";

const mailofly = new Mailofly(process.env.MAILOFLY_API_KEY!);

const emailHtml = await render(<WelcomeEmail name="Sarah" />);

await mailofly.emails.send({
  from: "Acme <welcome@yourdomain.com>",
  to: "sarah@example.com",
  subject: "Welcome to Acme!",
  html: emailHtml,
});

⌘I