Build beautiful, responsive email templates with React Email for Google Antigravity transactional emails.
# React Email Templates for Google Antigravity
Create beautiful, responsive email templates using React Email and send them through various providers. This guide covers template creation, testing, and integration.
## React Email Setup
```typescript
// emails/WelcomeEmail.tsx
import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, Section, Text } from "@react-email/components";
interface WelcomeEmailProps {
username: string;
verificationUrl: string;
}
export default function WelcomeEmail({ username, verificationUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Preview>Welcome to our platform, {username}!</Preview>
<Body style={main}>
<Container style={container}>
<Img src="https://yourapp.com/logo.png" width="170" height="50" alt="Logo" style={logo} />
<Heading style={heading}>Welcome, {username}!</Heading>
<Text style={paragraph}>
Thanks for signing up. We are excited to have you on board. Click the button below to verify your email address.
</Text>
<Section style={buttonContainer}>
<Button style={button} href={verificationUrl}>Verify Email Address</Button>
</Section>
<Text style={paragraph}>If the button does not work, copy and paste this link:</Text>
<Link href={verificationUrl} style={link}>{verificationUrl}</Link>
<Hr style={hr} />
<Text style={footer}>This email was sent because you signed up. If you did not, please ignore.</Text>
</Container>
</Body>
</Html>
);
}
const main = { backgroundColor: "#f6f9fc", fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" };
const container = { backgroundColor: "#ffffff", margin: "0 auto", padding: "40px 20px", maxWidth: "560px", borderRadius: "8px" };
const logo = { margin: "0 auto 24px" };
const heading = { fontSize: "24px", fontWeight: "bold", textAlign: "center" as const };
const paragraph = { fontSize: "16px", lineHeight: "26px", color: "#525252" };
const buttonContainer = { textAlign: "center" as const, margin: "32px 0" };
const button = { backgroundColor: "#5046e5", borderRadius: "6px", color: "#fff", fontSize: "16px", fontWeight: "bold", textDecoration: "none", padding: "12px 24px" };
const link = { color: "#5046e5", textDecoration: "underline" };
const hr = { borderColor: "#e6ebf1", margin: "32px 0" };
const footer = { fontSize: "12px", color: "#8898aa", textAlign: "center" as const };
```
## Email Sending Service
```typescript
// lib/email.ts
import { Resend } from "resend";
import { render } from "@react-email/render";
import WelcomeEmail from "@/emails/WelcomeEmail";
import PasswordResetEmail from "@/emails/PasswordResetEmail";
import InvoiceEmail from "@/emails/InvoiceEmail";
const resend = new Resend(process.env.RESEND_API_KEY);
export type EmailTemplate = "welcome" | "password-reset" | "invoice";
interface EmailOptions {
to: string;
template: EmailTemplate;
data: Record<string, unknown>;
}
export async function sendEmail({ to, template, data }: EmailOptions) {
let subject: string;
let html: string;
switch (template) {
case "welcome":
subject = `Welcome to our platform, ${data.username}!`;
html = render(WelcomeEmail({ username: data.username as string, verificationUrl: data.verificationUrl as string }));
break;
case "password-reset":
subject = "Reset your password";
html = render(PasswordResetEmail({ resetUrl: data.resetUrl as string, expiresIn: data.expiresIn as string }));
break;
case "invoice":
subject = `Invoice #${data.invoiceNumber}`;
html = render(InvoiceEmail({ invoiceNumber: data.invoiceNumber as string, amount: data.amount as number, items: data.items as Array<{ name: string; price: number }>, dueDate: data.dueDate as string }));
break;
}
const { error } = await resend.emails.send({ from: "noreply@yourapp.com", to, subject, html });
if (error) throw new Error(`Failed to send email: ${error.message}`);
}
```
## Invoice Email Template
```typescript
// emails/InvoiceEmail.tsx
import { Body, Container, Head, Heading, Hr, Html, Preview, Row, Column, Section, Text } from "@react-email/components";
interface InvoiceEmailProps {
invoiceNumber: string;
amount: number;
items: Array<{ name: string; price: number }>;
dueDate: string;
}
export default function InvoiceEmail({ invoiceNumber, amount, items, dueDate }: InvoiceEmailProps) {
return (
<Html>
<Head />
<Preview>Invoice #{invoiceNumber} - ${amount.toFixed(2)}</Preview>
<Body style={main}>
<Container style={container}>
<Heading style={heading}>Invoice #{invoiceNumber}</Heading>
<Section style={tableContainer}>
<Row style={tableHeader}>
<Column style={tableHeaderCell}>Item</Column>
<Column style={tableHeaderCellRight}>Price</Column>
</Row>
{items.map((item, index) => (
<Row key={index} style={tableRow}>
<Column style={tableCell}>{item.name}</Column>
<Column style={tableCellRight}>${item.price.toFixed(2)}</Column>
</Row>
))}
<Hr style={hr} />
<Row style={totalRow}>
<Column style={tableCell}><strong>Total</strong></Column>
<Column style={tableCellRight}><strong>${amount.toFixed(2)}</strong></Column>
</Row>
</Section>
<Text style={dueText}>Due Date: {dueDate}</Text>
</Container>
</Body>
</Html>
);
}
const main = { backgroundColor: "#f6f9fc", fontFamily: "Arial, sans-serif" };
const container = { backgroundColor: "#fff", margin: "0 auto", padding: "40px", maxWidth: "560px" };
const heading = { fontSize: "24px", fontWeight: "bold" };
const tableContainer = { marginTop: "24px" };
const tableHeader = { backgroundColor: "#f0f0f0" };
const tableHeaderCell = { padding: "12px", fontWeight: "bold" };
const tableHeaderCellRight = { padding: "12px", fontWeight: "bold", textAlign: "right" as const };
const tableRow = { borderBottom: "1px solid #e0e0e0" };
const tableCell = { padding: "12px" };
const tableCellRight = { padding: "12px", textAlign: "right" as const };
const hr = { margin: "16px 0" };
const totalRow = { backgroundColor: "#f9f9f9" };
const dueText = { marginTop: "24px", color: "#666" };
```
## Best Practices
1. **Inline Styles**: Use inline styles for maximum email client compatibility
2. **Table Layouts**: Use tables for complex layouts in emails
3. **Testing**: Test emails across multiple clients using tools like Litmus
4. **Preview Text**: Always include preview text for better inbox appearance
5. **Fallbacks**: Provide plain text alternatives for accessibilityThis email prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their email implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For email projects, consider mentioning your framework version, coding style, and any specific libraries you're using.