Skip to main content
React Email is a modern approach to building emails using React components. ReactUI Email builds on top of React Email to provide pre-built templates with full Tailwind CSS support.

​
What is React Email?

React Email allows you to write email templates using familiar React components instead of traditional HTML table layouts. This approach offers:
  • Component-based architecture: Reuse components across different email templates
  • Type safety: Leverage TypeScript for better development experience
  • Modern development: Use the tools and patterns you already know from web development

​
Core components

React Email provides essential components for building emails. Here are the most commonly used ones: 
import {
  Body,
  Container,
  Head,
  Html,
  Preview,
  Section,
  Text,
  Tailwind,
} from "@react-email/components";

export default function WelcomeEmail() {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform</Preview>
      <Tailwind>
        <Body className="font-sans">
          <Container className="mx-auto px-4 py-5">
            <Section>
              <Text className="text-lg">Welcome!</Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

​
Essential components

The root component that wraps your entire email. Always use this as the outermost component.
<Html>
  {/* Email content */}
</Html>
Contains meta information for your email. Include this near the top of your template.
<Head />
The preview text that appears in email clients before opening the email. Keep it concise and compelling.
<Preview>You've been invited to join the team</Preview>
The main body of your email. Apply global styles here.
<Body className="font-sans bg-white">
  {/* Content */}
</Body>
A centered container for your email content. Recommended max width is 600px for optimal email client support.
<Container className="mx-auto px-4 py-5">
  {/* Content */}
</Container>
Groups related content together. Similar to a <div> in HTML.
<Section className="mt-4">
  <Text>Section content</Text>
</Section>
For paragraphs and text content. Use this instead of <p> tags.
<Text className="text-base text-gray-700">
  Your message here
</Text>
Creates an email-safe button with a link.
<Button
  className="bg-blue-600 text-white px-6 py-3 rounded-lg"
  href="https://example.com"
>
  Click Here
</Button>
For images. Always include alt text and specify dimensions.
<Img
  src="https://example.com/image.png"
  width="400"
  height="300"
  alt="Description"
/>

​
Email client compatibility

Email clients have varying levels of support for modern HTML and CSS. Understanding these limitations is crucial for creating emails that work everywhere.

​
Support levels

1

Modern clients (good support)

  • Apple Mail (macOS, iOS)
  • Gmail (web, mobile apps)
  • Outlook (web, macOS)
  • Hey, Superhuman
These clients support most modern CSS including flexbox, custom fonts, and media queries.
2

Limited support clients

  • Outlook 2016-2021 (Windows)
  • Yahoo Mail
  • AOL Mail
These have partial CSS support. Avoid complex layouts and test thoroughly.
3

Legacy clients (minimal support)

  • Outlook 2007-2013 (Windows)
  • Some older email clients
Very limited CSS support. Stick to basic styling and table-based layouts if targeting these clients.

​
Best practices for compatibility

React Email components are designed to work across all email clients by converting modern React code into email-safe HTML.
  1. Use React Email components: These handle cross-client compatibility automatically
  2. Test in multiple clients: Use tools like Email on Acid or Litmus
  3. Avoid complex CSS: Stick to simple layouts and styles
  4. Use inline styles: The Tailwind component handles this conversion
  5. Specify image dimensions: Always include width and height attributes

​
Common patterns

​
Two-column layout

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

<Section>
  <Row>
    <Column className="w-1/2 p-4">
      <Text>Left column</Text>
    </Column>
    <Column className="w-1/2 p-4">
      <Text>Right column</Text>
    </Column>
  </Row>
</Section>

​
Horizontal rule

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

<Hr className="my-6 border-gray-200" />

​
Conditional rendering

export default function Email({ userName }: { userName?: string }) {
  return (
    <Html>
      <Tailwind>
        <Body>
          <Container>
            {userName ? (
              <Text>Welcome back, {userName}!</Text>
            ) : (
              <Text>Welcome!</Text>
            )}
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}
React Email templates are just React components, so you can use props, conditional rendering, and loops just like regular React components.

​
Next steps

Tailwind styling

Learn how to style your emails with Tailwind CSS

Customization

Customize templates with your brand colors and fonts

Sending emails

Render and send your email templates

Build docs developers (and LLMs) love

Get started for freeTalk to us