Try it out

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.

Creating a preview environment

We've created a starter template for you to try MailingUI and develop emails in a preview environment.

ℹ️

This template is heavily inspired in React.email (opens in a new tab) Preview mode.

MailingUI is incredibly flexible to work in any React Typescript project. In this example, we will experiment following this structure:

Email.tsx

Clone the starter template

The easiest way is to use Rich Harris' Degit (opens in a new tab). Choose where to create a new project and run the command:

# npm i -g degit
degit webscopeio/mailingui/examples/preview preview
cd preview
 
pnpm i
pnpm run dev

Initialize MailingUI

Download all the necessary starting files for you to start working with MailingUI.

npx @mailingui/cli init -p emails/mailingui

-p, --path define base path to your MailingUI components (default: "./src/mailingui")
-o, --overwrite overwrite existing configuration (default: false)
-h, --help display help for command

Add Component(s)

Add all or specific components to your project. See components for the full list.

npx @mailingui/cli add --all

-o, --overwrite automatically overwrite existing components (default: false)
-a, --all download all available components (default: false)
-h, `--help`` display help for command

Configure your path aliases (optional)

{
  "compilerOptions": {
    {...}
    "baseUrl": ".",
    "paths": {
      "@mailingui/components": ["./emails/mailingui/components/index.ts"],
      "@mailingui/themes": ["./emails/mailingui/themes/index.ts"],
      "@mailingui/utils": ["./emails/mailingui/utils/index.ts"]
    }
  },
}

Create emails in the `/emails` directory

import * as React from "react";
import { Body, Container, Html } from "@react-email/components";
import { P } from "@mailingui/components";
 
export default function Demo() {
  return (
    <Html>
      <Body style={body}>
        <Container style={container}>
          <P>
            Once upon a time, in a far-off land, there was a very lazy king who
            spent all day lounging on his throne. One day, his advisors came to
            him with a problem: the kingdom was running out of money.
          </P>
        </Container>
      </Body>
    </Html>
  );
}
 
export const body: React.CSSProperties = {
  backgroundColor: "#fff", // Background color outside container
  margin: 0, // Margin reset
};
 
export const container: React.CSSProperties = {
  backgroundColor: "#fff", // Email background color
  padding: "60px 30px",
  maxWidth: "600px", // Estalbish the maximum size of the email
};

🥳 Congratulations, you are ready to create beautiful emails using React.

Usage Overview