@react-email/container

What is @react-email/container?

@react-email/container is a React component library designed to help developers create responsive email templates with ease. It provides a set of components that can be used to structure and style email content, ensuring compatibility across various email clients.

What are @react-email/container's main functionalities?

Container Component

The Container component is used to wrap the main content of the email, providing a consistent layout and styling.

<Container>
  <p>Your email content goes here</p>
</Container>

Responsive Design

The Container component supports responsive design, allowing you to set styles such as max-width and margin to ensure the email looks good on different screen sizes.

<Container style={{ maxWidth: '600px', margin: '0 auto' }}>
  <p>Your responsive email content goes here</p>
</Container>

Custom Styling

You can apply custom styles to the Container component to match your email's design requirements, such as background color and padding.

<Container style={{ backgroundColor: '#f0f0f0', padding: '20px' }}>
  <p>Your custom styled email content goes here</p>
</Container>

Other packages similar to @react-email/container

react-html-email

react-html-email is a library for building HTML emails with React components. It provides a set of components and utilities to create responsive and well-structured email templates. Compared to @react-email/container, react-html-email offers a broader range of components specifically designed for email development.

mjml-react

mjml-react is a React wrapper for MJML, a markup language designed to reduce the pain of coding responsive emails. It allows you to use MJML components within React, providing a high level of abstraction and ease of use. While @react-email/container focuses on basic container functionality, mjml-react offers a comprehensive set of components for building complex email layouts.

README

@react-email/container

A layout component that centers all the email content.

Website · GitHub · Discord

Install

Install component from your command line.

With yarn

yarn add @react-email/container -E

With npm

npm install @react-email/container -E

Getting started

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

import { Button } from "@react-email/button";
import { Container } from "@react-email/container";

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

License

MIT License