Getting Started
Try it out

Try it out

MailingUI is a set of opinionated React components, built on top of (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 (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 (
                  <Body style={body}>
                    <Container style={container}>
                        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.
            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.