Layout components

React Email provides a set of layout components that help you structure your email templates using a table-based layout system. These components ensure your emails render consistently across all major email clients.

Container

The Container component is the main wrapper for your email content, providing consistent width and centering.

import { Body, Container } from "@react-email/components";

export default function Email() {
  return (
    <Body className="font-sans">
      <Container className="mx-auto mb-5 px-4 py-5">
        {/* Your email content */}
      </Container>
    </Body>
  );
}

className

string

Common classes for Container:

mx-auto - Centers the container horizontally
px-4 - Horizontal padding (16px)
py-5 - Vertical padding (20px)
w-full - Full width container

Default behavior

The Container component:

Centers content horizontally by default
Has a maximum width of 600px (email standard)
Provides a consistent wrapper for all email body content

Always wrap your main email content in a Container to ensure proper rendering across email clients.

Section

The Section component groups related content and provides vertical spacing between different parts of your email.

import { Container, Section, Text } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4 py-5">
      <Section className="my-8">
        <Text>First section content</Text>
      </Section>
      
      <Section className="my-8">
        <Text>Second section content</Text>
      </Section>
    </Container>
  );
}

className

string

Common classes for Section:

my-4 - Vertical margin (16px top and bottom)
my-8 - Vertical margin (32px top and bottom)
mt-4 / mb-4 - Individual top/bottom margins
text-center - Center align section content

Use cases

Separating header, body, and footer content
Creating visual breaks between content blocks
Grouping related elements (logo + heading, image + caption, etc.)

Row and Column

The Row and Column components create multi-column layouts using table-based structure.

Basic two-column layout

import { Column, Container, Row, Section } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto w-full px-4 py-5">
      <Section>
        <Row>
          <Column className="w-1/2 pr-2">
            {/* Left column content */}
          </Column>
          <Column className="w-1/2 pl-2">
            {/* Right column content */}
          </Column>
        </Row>
      </Section>
    </Container>
  );
}

className

string

Common width classes for columns:

w-1/2 - 50% width (2 columns)
w-1/3 - 33.33% width (3 columns)
w-2/3 - 66.67% width (asymmetric layout)
pr-2 / pl-2 - Padding for gutters between columns

Three-column grid

import { Column, Container, Img, Row, Section } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto w-full px-4 py-5">
      <Section className="mx-auto my-4 max-w-2xl">
        <Row className="mb-4">
          <Column className="w-1/3 pr-2">
            <Img
              src="/image1.jpg"
              alt="Item 1"
              className="w-full rounded-lg object-cover"
              height={150}
            />
          </Column>
          <Column className="w-1/3 px-2">
            <Img
              src="/image2.jpg"
              alt="Item 2"
              className="w-full rounded-lg object-cover"
              height={150}
            />
          </Column>
          <Column className="w-1/3 pl-2">
            <Img
              src="/image3.jpg"
              alt="Item 3"
              className="w-full rounded-lg object-cover"
              height={150}
            />
          </Column>
        </Row>
      </Section>
    </Container>
  );
}

Column layouts may stack on mobile devices. Test your multi-column layouts on various screen sizes to ensure readability.

Column alignment

Control horizontal alignment within columns:

import { Column, Container, Img, Row, Section, Text } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto w-full px-4 py-5">
      <Section className="my-0">
        <table className="w-full" cellPadding="0" cellSpacing="0" role="presentation">
          <tr>
            <td>
              <Row>
                <Column align="left">
                  <Img src="/logo.png" width="40" height="40" alt="Logo" />
                </Column>
                <Column align="right">
                  <Text className="m-0 text-sm font-semibold text-primary">
                    {new Date().toLocaleDateString()}
                  </Text>
                </Column>
              </Row>
            </td>
          </tr>
        </table>
      </Section>
    </Container>
  );
}

align

string

Column alignment options:

left - Align content to the left
center - Center content horizontally
right - Align content to the right

Advanced table layouts

For more complex layouts with borders or specific styling, use HTML table elements directly with inline styles:

import { Container, Section } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4">
      <Section className="mb-6 flex flex-col items-center justify-center rounded-[12px] bg-[hsl(240,4.8%,95.9%)]/50">
        <table
          style={{
            border: "1px solid rgb(39 39 42 / 0.1)",
            borderRadius: "8px",
            borderCollapse: "collapse",
            display: "flex",
            justifyContent: "center",
            width: "fit-content",
            alignItems: "center",
            padding: "24px",
          }}
        >
          <tr>
            <td>
              {/* Table content */}
            </td>
          </tr>
        </table>
      </Section>
    </Container>
  );
}

Use inline styles for critical table properties like border, borderCollapse, and padding to ensure consistent rendering across email clients.

Text and Heading

Typography components for displaying text content:

Text component

import { Container, Section, Text } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4">
      <Section>
        <Text className="text-[16px] leading-6 text-primary/80">
          Welcome to our platform! We're excited to have you on board.
        </Text>
      </Section>
    </Container>
  );
}

className

string

Common text styling classes:

text-[14px] / text-[16px] - Font sizes
leading-6 - Line height
text-primary - Text color
text-primary/80 - Text color with 80% opacity
m-0 - Remove default margins
p-0 - Remove default padding

Heading component

import { Container, Heading, Section } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4">
      <Section className="mt-4">
        <Heading className="mx-0 mb-8 mt-2 p-0 text-lg font-normal">
          Welcome to Framer!
        </Heading>
      </Section>
    </Container>
  );
}

className

string

Common heading styling classes:

text-lg - Large text size
text-[32px] - Explicit pixel size
font-normal / font-semibold / font-bold - Font weights
mx-0 my-0 - Remove horizontal/vertical margins

Image component

Display images with proper sizing and styling:

import { Container, Img, Link, Section } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4">
      <Section className="mt-8">
        <Link href="https://example.com">
          <Img
            src="https://example.com/image.jpg"
            alt="Feature image"
            className="w-full cursor-pointer rounded-2xl"
          />
        </Link>
      </Section>
    </Container>
  );
}

src

string

required

Image URL (must be absolute URL, not relative path)

alt

string

required

Alt text for accessibility

width

number

Explicit width in pixels

height

number

Explicit height in pixels

Always use absolute URLs for images. Relative paths will not work in email clients.

Responsive images

For responsive images, use percentage-based widths:

<Img
  src="https://example.com/banner.jpg"
  alt="Banner"
  className="w-full aspect-video rounded-[8px] object-cover"
/>

Hr (Horizontal Rule)

Create visual separators between sections:

import { Container, Hr, Section } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4">
      <Section>Content above</Section>
      
      <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
      
      <Section>Content below</Section>
    </Container>
  );
}

className

string

Common Hr styling:

my-[26px] - Vertical margin
w-full - Full width line
border border-solid border-[#eaeaea] - Border styling
mx-0 - Remove horizontal margin

Link component

Create clickable links with proper styling:

import { Container, Link, Section, Text } from "@react-email/components";

export default function Email() {
  return (
    <Container className="mx-auto px-4">
      <Section>
        <Text className="text-[14px] leading-6 text-primary/75">
          Learn more in our{" "}
          <Link
            href="https://example.com/guide"
            className="text-primary/75 underline"
          >
            comprehensive guide
          </Link>
          .
        </Text>
      </Section>
    </Container>
  );
}

href

string

required

The destination URL

className

string

Common link styling:

underline - Underline the link text
text-primary/75 - Link color with opacity
font-semibold - Bold link text

Best practices

Spacing and layout

Consistent spacing: Use multiples of 4px for margins and padding (my-4, my-8, px-4)
Container usage: Always wrap content in a Container component
Section separation: Use Section components to group related content
Mobile-first: Design with mobile devices in mind, as many users read email on phones

Email client compatibility

These layout components use table-based layouts, which have the best cross-client compatibility. Avoid using CSS Grid or Flexbox for main layout structure.

Performance

Keep images under 1MB for faster loading
Use appropriate image formats (JPEG for photos, PNG for graphics)
Always specify image dimensions to prevent layout shifts

Accessibility

Use semantic HTML elements (headings, paragraphs)
Provide descriptive alt text for all images
Ensure sufficient color contrast for text
Use logical heading hierarchy (h1 → h2 → h3)

Email Components

Container

Default behavior

Section

Use cases

Row and Column

Basic two-column layout

Three-column grid

Column alignment

Advanced table layouts

Text and Heading

Text component

Heading component

Image component

Responsive images

Hr (Horizontal Rule)

Link component

Best practices

Spacing and layout

Email client compatibility

Performance

Accessibility

Build docs developers (and LLMs) love

Email Components

​Container

​Default behavior

​Section

​Use cases

​Row and Column

​Basic two-column layout

​Three-column grid

​Column alignment

​Advanced table layouts

​Text and Heading

​Text component

​Heading component

​Image component

​Responsive images

​Hr (Horizontal Rule)

​Link component

​Best practices

​Spacing and layout

​Email client compatibility

​Performance

​Accessibility

Build docs developers (and LLMs) love

Container

Default behavior

Section

Use cases

Row and Column

Basic two-column layout

Three-column grid

Column alignment

Advanced table layouts

Text and Heading

Text component

Heading component

Image component

Responsive images

Hr (Horizontal Rule)

Link component

Best practices

Spacing and layout

Email client compatibility

Performance

Accessibility