React Email is a templating library, not a sender. You write your email as a React component using @react-email/components, call render() to turn it into an HTML string, then hand that HTML to any email provider to deliver. The split matters: React Email handles the markup (and the cross-client quirks that make email HTML painful), while a separate provider does the sending. Here is the full loop.
How do you build an email template?
Install the packages:
npm install @react-email/components @react-email/renderThe 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: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();The delivered@bird.dev sandbox address always accepts mail, so you can confirm both the template and the send in one run. This pattern drops cleanly into a serverless function, which is covered in how to send email on Vercel. If you would rather send over SMTP, the same html string works 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.