Skip to main content
A layout component that centers all the email content with a maximum width.

​
Installation

npm install @react-email/container -E

​
Usage

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>
  );
};

​
Props

The Container component accepts all standard HTML table attributes.
​
children
ReactNode
The content to place inside the container
​
style
React.CSSProperties
Inline styles for the container. By default, the container has a maxWidth of 37.5em (600px)

​
Default Styles

The container has the following default styles:
  • Centered alignment (align="center")
  • Maximum width of 37.5em (approximately 600px)
  • Full width (width="100%")

​
TypeScript

export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;

​
Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman
✔✔✔✔✔✔

Build docs developers (and LLMs) love

Get started for freeTalk to us