How to send emails with React Email

Email clients reject modern CSS flexbox and grid layouts, forcing developers to write nested HTML tables and inline styles by hand. React Email compiles JSX components into table-based markup that renders consistently across Gmail, Outlook, and Apple Mail.

How do you build an email template?

Install the packages:

npm install @react-email/components @react-email/render

The components map to email-safe HTML and handle inline styles and table layouts for you. A simple receipt template, accepting props so you can reuse it:

// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";

type ReceiptProps = {
  name: string;
  total: string;
};

export function Receipt({ name, total }: ReceiptProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Heading>Thanks, {name}</Heading>
          <Text>Your order total was {total}.</Text>
        </Container>
      </Body>
    </Html>
  );
}

Because it is just React, you compose, loop, and pass props the way you would in any component, then preview it locally before it ever goes out.

How do you render the component to HTML?

render() takes the element and returns an HTML string. It can also produce a plain-text version, which you should include as the text alternative:

import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";

const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
  plainText: true,
});

At this point you have a string of HTML. React Email's job is done. Nothing has been sent yet; you need a provider for that.

Send it with Bird

Pass the rendered HTML straight into the Bird email API. The component output becomes the html field:

import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const html = await render(<Receipt name="Alex" total="$42.00" />);

const { data, error } = await bird.email.send({
  from:    "onboarding@messagebird.dev",
  to:      ["delivered@messagebird.dev"],
  subject: "Your receipt",
  html,
}).safe();

The onboarding@messagebird.dev sender and delivered@messagebird.dev sandbox address confirm both the rendered template and the send in one run. The same render() output works inside Vercel functions or over SMTP with Nodemailer.

FAQ

Does React Email send the email?

No. It builds the template and renders it to HTML and plain text. Delivery is a separate step handled by a provider such as an SMTP server or an email API.

Why use React Email instead of writing HTML by hand?

Email HTML has to work across clients that support very different subsets of CSS, which usually means nested tables and inline styles. React Email's components produce that markup for you, so you write components and get email-safe output.

Can I reuse one template with different data?

Yes. Templates are React components, so they take props. Render the same component with different values for each recipient, then send each result.

React Email and a sending API divide the work neatly: one shapes the message, the other delivers it. For managed templating on the sending side, see Bird email templates.