Master React Email template patterns for Google Antigravity IDE transactional emails
# React Email Template Patterns for Google Antigravity IDE
Build beautiful transactional emails with React Email using Google Antigravity IDE. This guide covers component patterns, responsive design, and email client compatibility.
## Email Component Library
```typescript
// emails/components/Layout.tsx
import { Body, Container, Head, Html, Preview, Tailwind } from "@react-email/components";
interface LayoutProps {
preview: string;
children: React.ReactNode;
}
export function Layout({ preview, children }: LayoutProps) {
return (
<Html>
<Head />
<Preview>{preview}</Preview>
<Tailwind
config={{
theme: {
extend: {
colors: {
brand: "#3b82f6",
"brand-dark": "#2563eb",
},
},
},
}}
>
<Body className="bg-gray-100 font-sans">
<Container className="mx-auto max-w-xl py-8">{children}</Container>
</Body>
</Tailwind>
</Html>
);
}
```
## Welcome Email
```typescript
// emails/WelcomeEmail.tsx
import { Button, Heading, Hr, Img, Link, Section, Text } from "@react-email/components";
import { Layout } from "./components/Layout";
interface WelcomeEmailProps {
name: string;
verificationUrl: string;
}
export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
return (
<Layout preview={"Welcome to our platform, " + name + "!"}>
<Section className="bg-white rounded-lg shadow-sm p-8">
<Img src="https://example.com/logo.png" width={120} height={40} alt="Logo" className="mx-auto mb-6" />
<Heading className="text-2xl font-bold text-gray-900 text-center mb-4">
Welcome, {name}!
</Heading>
<Text className="text-gray-600 text-base leading-6 mb-6">
We are excited to have you on board. Before you get started, please verify your email address by clicking the button below.
</Text>
<Section className="text-center mb-8">
<Button
href={verificationUrl}
className="bg-brand text-white font-semibold py-3 px-6 rounded-lg inline-block"
>
Verify Email Address
</Button>
</Section>
<Text className="text-gray-500 text-sm mb-4">
Or copy and paste this URL into your browser:
</Text>
<Text className="text-brand text-sm break-all">{verificationUrl}</Text>
<Hr className="border-gray-200 my-6" />
<Text className="text-gray-400 text-xs text-center">
If you did not create an account, you can safely ignore this email.
</Text>
</Section>
</Layout>
);
}
```
## Order Confirmation
```typescript
// emails/OrderConfirmation.tsx
import { Column, Heading, Hr, Row, Section, Text } from "@react-email/components";
import { Layout } from "./components/Layout";
interface OrderItem {
name: string;
quantity: number;
price: number;
image: string;
}
interface OrderConfirmationProps {
orderNumber: string;
customerName: string;
items: OrderItem[];
subtotal: number;
shipping: number;
tax: number;
total: number;
shippingAddress: {
street: string;
city: string;
state: string;
zip: string;
};
}
export default function OrderConfirmation({
orderNumber,
customerName,
items,
subtotal,
shipping,
tax,
total,
shippingAddress,
}: OrderConfirmationProps) {
const formatPrice = (price: number) =>
new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(price);
return (
<Layout preview={"Order " + orderNumber + " confirmed"}>
<Section className="bg-white rounded-lg shadow-sm p-8">
<Heading className="text-2xl font-bold text-gray-900 mb-2">Order Confirmed</Heading>
<Text className="text-gray-600 mb-6">Thank you, {customerName}! Your order is on its way.</Text>
<Text className="text-sm text-gray-500 mb-6">Order #{orderNumber}</Text>
<Hr className="border-gray-200 my-6" />
{items.map((item, index) => (
<Row key={index} className="mb-4">
<Column className="w-16">
<img src={item.image} alt={item.name} width={60} height={60} className="rounded" />
</Column>
<Column className="pl-4">
<Text className="font-medium text-gray-900 m-0">{item.name}</Text>
<Text className="text-sm text-gray-500 m-0">Qty: {item.quantity}</Text>
</Column>
<Column className="text-right">
<Text className="font-medium text-gray-900 m-0">{formatPrice(item.price)}</Text>
</Column>
</Row>
))}
<Hr className="border-gray-200 my-6" />
<Row><Column>Subtotal</Column><Column className="text-right">{formatPrice(subtotal)}</Column></Row>
<Row><Column>Shipping</Column><Column className="text-right">{formatPrice(shipping)}</Column></Row>
<Row><Column>Tax</Column><Column className="text-right">{formatPrice(tax)}</Column></Row>
<Row className="font-bold"><Column>Total</Column><Column className="text-right">{formatPrice(total)}</Column></Row>
<Hr className="border-gray-200 my-6" />
<Heading as="h3" className="text-lg font-semibold mb-2">Shipping Address</Heading>
<Text className="text-gray-600 m-0">{shippingAddress.street}</Text>
<Text className="text-gray-600 m-0">{shippingAddress.city}, {shippingAddress.state} {shippingAddress.zip}</Text>
</Section>
</Layout>
);
}
```
## Best Practices for Google Antigravity IDE
When using React Email with Google Antigravity, use Tailwind for consistent styling. Test in multiple email clients. Keep layouts simple for compatibility. Use inline styles for critical elements. Let Gemini 3 generate email templates from your designs.
Google Antigravity excels at creating responsive email templates with React Email.This React 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 react 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 React Email projects, consider mentioning your framework version, coding style, and any specific libraries you're using.