Docs
Getting Started
Usage

Usage

MailingUI is built on top of React.email (opens in a new tab) components and uses its render function to parse React into HTML that is optimized for various email clients. Once the HTML markup is rendered, you have the flexibility to employ any preferred email sending service or library to effectively deliver your emails.

Let's explore how to use MailingUI components to create emails and send them using Resend (opens in a new tab). For alternative providers, please refer to React.email Integrations (opens in a new tab).

Install dependencies

Once you've install MailingUI and its dependencies successfully (otherwise please refer to Introduction), you can install Resend's SDK:

npm install resend

Create email template

Use your MailingUI components along with any other React.email Components (opens in a new tab) to create your email template just like any other React component. Here's an example:

import { Body, Container, Html, Row } from "@react-email/components";
import { Text } from "@mailingui/components";
 
type GreetingProps = {
  username: string;
};
 
const Greeting = ({ username }: GreetingProps) => {
  return (
    <Html>
      <Body style={main}>
        <Container style={container} width={600}>
          <Row style={{ marginBottom: "16px" }}>
            <Text style={{ fontSize: "32px" }}>Hello, {username}!</Text>
          </Row>
          <Row>
            <Text>Greetings from MailingUI and React.email using Resend</Text>
          </Row>
        </Container>
      </Body>
    </Html>
  );
};
export default Greeting;
 
const main = {
  backgroundColor: "#f6f9fc",
  padding: "60px 0 122px 0",
};
 
const container = {
  backgroundColor: "#ffffff",
  border: "1px solid #f0f0f0",
  padding: "40px",
  fontFamily: "'Inter', sans-serif",
};

Send email

The most common practice for sending emails is to manage them through API Routes. This example showcases Next Route handlers for this.

Resend is the company behind React.email, therefore Resend's SDK is able to process React components as directly in place of HTML.

import { NextResponse } from "next/server";
import { Resend } from "resend";
import Greeting from "./src/emails/Greeting";
 
const resend = new Resend(process.env.RESEND_API_KEY);
 
export async function POST() {
  // You would process the payload from the request to parametrize your email
  try {
    const data = await resend.emails.send({
      from: process.env.RESEND_SENDER,
      to: "vorcak@webscope.io",
      subject: "Greetings",
      react: Greeting({
        username: "vorcak",
      }),
    });
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

Useful links

For more information on the resources referenced in this page:

Manual InstallOverview