Need help with your emails? Contact us at hello@mailingui.com
Docs
Getting Started
Usage

Usage

MailingUI is a set of opinionated React components, built on top of React.email (opens in a new tab), designed to make the creation of emails easier. Before you continue, make sure to read Getting Started - Introduction.

MailingUI uses React.email (opens in a new tab) render utility 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

npm install resend

Create email template

Use any of 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:

/emails/email.tsx
import * as React from "react";
import {
  Html,
  Head,
  Body,
  Container,
  Row,
  Column,
} from "@react-email/components";
 
import Demo from "./Demo.mdx";
import { Typography } from "@mailingui/components";
 
export default function Email({ greeting }: { greeting: string }) {
  return (
    <Html>
      <Head />
      <Body style={body}>
        <Container style={container}>
          <Row style={row}>
            <Column>
              <Typography.P>{greeting}</Typography.P>
            </Column>
          </Row>
        </Container>
      </Body>
    </Html>
  );
}
 
export const body: React.CSSProperties = {
  backgroundColor: "#fafafa", // Background color outside container
  margin: 0, // Margin reset
};
 
export const container: React.CSSProperties = {
  backgroundColor: "#fff", // Email background color
  padding: "60px 30px", // We remove inline padding to enable full-width banners
  maxWidth: "600px", // Estalbish the maximum size of the email
};

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.

/api/email/route.ts
import { NextResponse } from "next/server";
import { Resend } from "resend";
import Email from "./src/emails/Email";
 
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: Email({
        greeting: "Hello, Jan Vorcak!",
      }),
    });
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

Useful links

For more information on the resources referenced in this page:

ThemingTry it out