Skip to main content

Creating Email Templates

Template Structure​

Email templates are React components that use React Email components for consistent rendering across email clients.

Basic Template​

import {
    Html,
    Head,
    Preview,
    Body,
    Container,
    Text,
    Button,
    Hr,
} from "@react-email/components";

interface EmailProps {
    name: string;
    actionUrl: string;
}

export default function ExampleEmail({ name, actionUrl }: EmailProps) {
    return (
        <Html>
            <Head />
            <Preview>Welcome to our platform</Preview>
            <Body>
                <Container>
                    <Text>Hello {name},</Text>
                    <Text>Welcome to our platform!</Text>
                    <Button href={actionUrl}>
                        Get Started
                    </Button>
                    <Hr />
                    <Text>Thanks for joining us!</Text>
                </Container>
            </Body>
        </Html>
    );
}

Available Components​

React Email provides many components for email layouts:

  • <Button /> - Call-to-action buttons
  • <Text /> - Text content
  • <Container /> - Content wrapper
  • <Hr /> - Horizontal rule
  • <Image /> - Responsive images
  • And many more

Implementing a New Email​

  1. Create template in src/mail/:
import { Html, Text, Button } from "@react-email/components";

export default function NotificationEmail({ message, actionUrl }) {
    return (
        <Html>
            <Text>{message}</Text>
            <Button href={actionUrl}>Take Action</Button>
        </Html>
    );
}
  1. Add sending function in src/util/mail.tsx:
import NotificationEmail from "@/mail/notification";

export const sendNotification = async (email: string, message: string, actionUrl: string) => {
    const html = await render(<NotificationEmail 
        message={message} 
        actionUrl={actionUrl} 
    />, { pretty: true });

    await sendEmail({
        to: email,
        subject: "New Notification",
        text: message,
        html
    });
};
tip

Check out the React Email documentation for:

  • Component API references
  • Styling guidelines
  • Best practices
  • Template examples