MailingUI components

Installation

MailingUI components are intended to be used as copy and paste components. Some common setup steps are required in your project for individual components to work.

  1. Initialize NextJs app (if not already done)
npx create-next-app
  1. Install MailingUI dependencies
npm install @react-email/components @react-email/render

TODO: specify versions?

  1. Copy common MailingUI utilities to your project (@mailingui/themes)
cp something

TODO: How to do this with full folder?

  1. (Recommended) Setup tsconfig.json aliases
{
  "compilerOptions": {
    "paths": {
      "@mailingui/components": ["src/mailingui/components/index.ts"],
      "@mailingui/themes": ["src/mailingui/themes/index.ts"]
    }
  }
}

Now you should be able to use MailingUI components in your project.
It might be necessary to update paths to match your project structure.

Explore components

  • Hero section

    Hero section

    Beautiful headers to showcase your message

  • Lists

    Lists

    Organize information with simple lists

  • Badges

    Badges

    Highlight key information with attention-grabbing badges

  • Buttons

    Buttons

    Drive user action with clickable buttons

  • Emojis

    Emojis

    Add personality and emotion to your messages

  • Social icons

    Social icons

    Increase engagement with clickable social icons

  • Paragraphs

    Paragraphs

    Craft compelling content with easy-to-read paragraphs

  • Dividers

    Dividers

    Create visual separation for a clean, professional look