Rendering Responsive Templates with React Email
Writing HTML tables with inline CSS style tags to support various email clients is tedious. React Email lets you build responsive email templates using clean, modern React components.
1. Installation
Install the official React Email components package:
# Install react-email components
npm install @react-email/components2. Designing the Email Component
Create an email template component (for example, WelcomeTemplate.tsx):
// src/emails/WelcomeTemplate.tsx
import * as React from "react";
import {
Html,
Body,
Container,
Text,
Link,
Heading,
Button,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmailTemplate({
userName,
loginUrl,
}: WelcomeEmailProps) {
return (
<Html lang="en">
<Body style={bodyStyle}>
<Container style={containerStyle}>
<Heading style={headerStyle}>Welcome, {userName}!</Heading>
<Text style={textStyle}>
Your registration is active. Click the button below to sign in and set up your business workspace settings.
</Text>
<Button href={loginUrl} style={buttonStyle}>
Open Workspace
</Button>
<Text style={footerStyle}>
If you did not make this request, please ignore this email.
</Text>
</Container>
</Body>
</Html>
);
}
// Inline styling configurations
const bodyStyle = {
backgroundColor: "#f9fafb",
fontFamily: "Inter, Roboto, sans-serif",
};
const containerStyle = {
margin: "0 auto",
padding: "40px 20px",
maxWidth: "560px",
};
const headerStyle = {
fontSize: "24px",
color: "#111827",
};
const textStyle = {
fontSize: "14px",
color: "#4b5563",
lineHeight: "24px",
};
const buttonStyle = {
backgroundColor: "#2563eb",
borderRadius: "8px",
color: "#ffffff",
fontSize: "14px",
fontWeight: "bold",
textDecoration: "none",
textAlign: "center" as const,
display: "block",
padding: "12px",
marginTop: "20px",
};
const footerStyle = {
fontSize: "12px",
color: "#9ca3af",
marginTop: "40px",
};3. Delivering the Template with Resend
In your server actions or routing code, pass the React component directly to the react property of Resend emails:
import { resend } from "../lib/resend";
import { WelcomeEmailTemplate } from "../emails/WelcomeTemplate";
import React from "react";
async function sendTemplateEmail() {
await resend.emails.send({
from: "Acme Team <onboarding@mycompany.com>",
to: ["newuser@example.com"],
subject: "Active Your Account",
react: React.createElement(WelcomeEmailTemplate, {
userName: "Alex",
loginUrl: "https://mycompany.com/login",
}),
});
}Published on Last updated: