Automatic Install

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.

Create a React TypeScript Project

Use your favorite framework and create a React TypeScript project where you can integrate MailingUI.

⚠️

If you will write emails using MDX, we assume you have an integration to compile MDX to JS, such as @mdx-js/esbuild, @mdx-js/loader, @mdx-js/node-loader, or @mdx-js/rollup in place. If you don't, please refer to MDX Packages (opens in a new tab).

Initialize MailingUI

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

npx @mailingui/cli init

-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": ["./src/mailingui/components/index.ts"],
      "@mailingui/themes": ["./src/mailingui/themes/index.ts"],
      "@mailingui/utils": ["./src/mailingui/utils/index.ts"]
    }
  },
}

ℹ️

Path alias depends on where you decide to install your MailingUI components. Example above shows installation in ./src/mailingui

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

ℹ️

If you would like to learn more about what's happening under the hood, make sure to reference: manual install

Introduction Manual Install