Convert Figma logo to code with AI

resend logoreact-email

💌 Build and send emails using React

13,919
628
13,919
66
View on GitHubView on NPM

Top Related Projects

mjmlio's avatar

mjml

17,026

MJML: the only framework that makes responsive-email easy

leemunroe's avatar

responsive-html-email-template

13,284

A free simple responsive HTML email template

foundation's avatar

foundation-emails

7,768

Quickly create responsive HTML emails that work on any device and client. Even Outlook.

emailmonday's avatar

Cerberus

4,999

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

ActiveCampaign's avatar

postmark-templates

3,080

Rock-solid transactional email templates for applications.

mailchimp's avatar

email-blueprints

6,985

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

Quick Overview

React Email is a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It aims to make email development as simple as building a website, providing a set of customizable and reusable components that work across various email clients.

Pros

  • Easy to use and integrate with existing React projects
  • Provides a wide range of pre-built, customizable components
  • Ensures compatibility across different email clients
  • Offers TypeScript support for improved development experience

Cons

  • Limited to React developers, not suitable for non-React projects
  • May require additional setup for complex email layouts
  • Learning curve for developers new to email development
  • Dependency on external libraries and React ecosystem

Code Examples

  1. Creating a simple email template:
import { Html, Head, Body, Container, Text, Link } from '@react-email/components';

const EmailTemplate = () => (
  <Html>
    <Head />
    <Body style={main}>
      <Container>
        <Text>Hello World</Text>
        <Link href="https://example.com">Visit our website</Link>
      </Container>
    </Body>
  </Html>
);

const main = {
  backgroundColor: '#ffffff',
  fontFamily: 'sans-serif',
};

export default EmailTemplate;
  1. Using a pre-built component (Button):
import { Button } from '@react-email/button';

const CallToAction = () => (
  <Button
    pX={20}
    pY={12}
    href="https://example.com"
    style={{ background: '#000', color: '#fff' }}
  >
    Click me!
  </Button>
);
  1. Creating a responsive column layout:
import { Section, Column } from '@react-email/components';

const TwoColumnLayout = () => (
  <Section>
    <Column>
      <Text>Left column content</Text>
    </Column>
    <Column>
      <Text>Right column content</Text>
    </Column>
  </Section>
);

Getting Started

To start using React Email, follow these steps:

  1. Install the package:
npm install @react-email/components
  1. Import and use components in your React application:
import { Html, Head, Body, Container, Text } from '@react-email/components';

const MyEmail = () => (
  <Html>
    <Head />
    <Body>
      <Container>
        <Text>Welcome to React Email!</Text>
      </Container>
    </Body>
  </Html>
);

export default MyEmail;
  1. Render the email component and send it using your preferred email service provider or testing tool.

Competitor Comparisons

mjmlio logo

mjml

17,026

MJML: the only framework that makes responsive-email easy

Pros of MJML

  • Mature and well-established framework with a large community
  • Extensive documentation and learning resources
  • Responsive design out-of-the-box with minimal effort

Cons of MJML

  • Steeper learning curve due to custom syntax and components
  • Less flexibility for complex, dynamic email content
  • Limited integration with modern JavaScript frameworks

Code Comparison

MJML:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello, World!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

React Email:

import { Html, Body, Container, Text } from '@react-email/components';

export default function Email() {
  return (
    <Html>
      <Body>
        <Container>
          <Text>Hello, World!</Text>
        </Container>
      </Body>
    </Html>
  );
}

MJML uses a custom XML-like syntax with specific tags, while React Email leverages familiar React components and JSX. This difference highlights MJML's email-specific approach versus React Email's integration with the React ecosystem.

leemunroe logo

responsive-html-email-template

13,284

A free simple responsive HTML email template

Pros of responsive-html-email-template

  • Simple and lightweight, with a focus on responsiveness across devices
  • Easy to customize without extensive knowledge of email development
  • Includes inline CSS for better compatibility with email clients

Cons of responsive-html-email-template

  • Limited to static HTML templates, lacking dynamic content generation
  • Requires manual updates and maintenance for each email design
  • Less flexibility for complex, data-driven email layouts

Code Comparison

responsive-html-email-template:

<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
  <tr>
    <td>&nbsp;</td>
    <td class="container">
      <div class="content">
        <!-- START CENTERED WHITE CONTAINER -->
        <table role="presentation" class="main">

react-email:

import { Html, Head, Preview, Body, Container, Section, Text } from '@react-email/components';

export default function Email() {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Body style={main}>
        <Container>

The react-email repository offers a more modern, component-based approach to email development using React, allowing for dynamic content generation and easier maintenance. However, responsive-html-email-template provides a simpler, more traditional HTML-based solution that may be easier to implement for developers less familiar with React or modern JavaScript frameworks.

foundation logo

foundation-emails

7,768

Quickly create responsive HTML emails that work on any device and client. Even Outlook.

Pros of Foundation-emails

  • Mature and well-established framework with a large community
  • Includes a responsive grid system and pre-built components
  • Supports both HTML and plain text email versions

Cons of Foundation-emails

  • Steeper learning curve due to its comprehensive nature
  • Less flexibility in customization compared to React-based solutions
  • Requires separate build process and tooling

Code Comparison

Foundation-emails:

<container>
  <row>
    <columns small="12" large="6">
      <h1>Hello, World!</h1>
    </columns>
  </row>
</container>

React-email:

import { Container, Row, Column, Heading } from '@react-email/components';

<Container>
  <Row>
    <Column>
      <Heading>Hello, World!</Heading>
    </Column>
  </Row>
</Container>

Foundation-emails uses custom HTML tags and attributes for layout and responsiveness, while React-email leverages React components and JSX syntax. React-email offers a more familiar development experience for React developers, while Foundation-emails provides a more traditional HTML-based approach with built-in email-specific optimizations.

Both frameworks aim to simplify email development, but they cater to different developer preferences and workflow styles. The choice between them depends on factors such as team expertise, project requirements, and desired level of customization.

emailmonday logo

Cerberus

4,999

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

Pros of Cerberus

  • Lightweight and focused on email template compatibility
  • Extensive documentation on email client support
  • Simple HTML-based approach, easier for non-React developers

Cons of Cerberus

  • Less flexible for dynamic content generation
  • Limited to HTML and inline CSS, lacking component-based architecture
  • Requires manual updates for design changes across multiple templates

Code Comparison

Cerberus (HTML-based):

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
      <h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">Heading 1</h1>
      <p style="margin: 0;">This is a paragraph of text.</p>
    </td>
  </tr>
</table>

React Email (Component-based):

import { Html, Head, Body, Container, Section, Text, Heading } from '@react-email/components';

export default function Email() {
  return (
    <Html>
      <Head />
      <Body style={main}>
        <Container>
          <Section>
            <Heading>Heading 1</Heading>
            <Text>This is a paragraph of text.</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}
ActiveCampaign logo

postmark-templates

3,080

Rock-solid transactional email templates for applications.

Pros of postmark-templates

  • Ready-to-use, professionally designed email templates
  • Extensive collection covering various use cases (welcome emails, password resets, etc.)
  • HTML and plain text versions available for each template

Cons of postmark-templates

  • Limited customization options without manual HTML editing
  • Lack of component-based architecture for easy reusability
  • No built-in responsive design system

Code Comparison

postmark-templates (HTML-based):

<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
        <!-- Email content here -->
      </table>
    </td>
  </tr>
</table>

react-email (React-based):

import { Html, Head, Body, Container } from '@react-email/components';

export default function Email() {
  return (
    <Html>
      <Head />
      <Body>
        <Container>
          {/* Email content here */}
        </Container>
      </Body>
    </Html>
  );
}

The postmark-templates repository offers a collection of pre-designed email templates, while react-email provides a framework for building custom email templates using React components. postmark-templates is ideal for quick implementation of common email types, whereas react-email offers more flexibility and customization options for developers familiar with React.

mailchimp logo

email-blueprints

6,985

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

Pros of email-blueprints

  • Provides a wide range of pre-designed email templates
  • Includes responsive designs for various email clients
  • Offers extensive documentation and best practices for email design

Cons of email-blueprints

  • Limited customization options compared to React-based solutions
  • Requires manual HTML editing for template modifications
  • Less flexibility for dynamic content generation

Code Comparison

email-blueprints (HTML-based):

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 10px 0 30px 0;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
        <!-- Email content goes here -->
      </table>
    </td>
  </tr>
</table>

react-email (React-based):

import { Html, Head, Body, Container } from '@react-email/components';

const EmailTemplate = () => (
  <Html>
    <Head />
    <Body style={{ padding: '10px 0 30px 0' }}>
      <Container width="600">
        {/* Email content goes here */}
      </Container>
    </Body>
  </Html>
);

The code comparison highlights the difference in approach between the traditional HTML-based email templates in email-blueprints and the React-based components in react-email. The react-email approach offers more flexibility and easier integration with modern web development workflows.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React email cover

React Email
The next generation of writing emails.
High-quality, unstyled components for creating emails.

Website · GitHub · Discord

Introduction

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.

Why

We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in 2022 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.

Install

Install one of the components from your command line.

With yarn

yarn add @react-email/components -E

With npm

npm install @react-email/components -E

With pnpm

pnpm install @react-email/components -E

Getting started

Add the component to your email template. Include styles where needed.

import { Button } from "@react-email/components";

const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );
};

Components

A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

Integrations

Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:

Support

All components were tested using the most popular email clients.

Gmail logoApple MailOutlook logoYahoo! Mail logoHEY logoSuperhuman logo
Gmail ✔Apple Mail ✔Outlook ✔Yahoo! Mail ✔HEY ✔Superhuman ✔

Development

Install dependencies

pnpm install

Build and run packages

pnpm dev

This will initialize all packages in parallel and watch for changes, including the website which will be available at localhost:3000.

Contributing

Authors

License

MIT License

NPM DownloadsLast 30 Days