> ## Documentation Index > Fetch the complete documentation index at: https://docs.mailofly.com/llms.txt > Use this file to discover all available pages before exploring further. # React Email Templates > How to design, render, and send responsive emails using React Email and Mailofly. # React Email Templates [React Email](https://react.email) is a collection of high-quality, unstyled React components for building clean, cross-client responsive emails. You can seamlessly render React Email components to HTML and dispatch them via Mailofly. *** ## 1. Install Dependencies ```bash theme={null} npm install @react-email/components react-email mailofly ``` *** ## 2. Create a React Email Component ```tsx emails/welcome-email.tsx theme={null} import { Html, Head, Body, Container, Text, Button, Heading, } from "@react-email/components"; import * as React from "react"; interface WelcomeEmailProps { name: string; } export function WelcomeEmail({ name }: WelcomeEmailProps) { return ( Welcome to Acme, {name}! We are excited to have you on board. ); } ``` *** ## 3. Render and Send via Mailofly ```typescript theme={null} import { render } from "@react-email/components"; import { Mailofly } from "mailofly"; import { WelcomeEmail } from "./emails/welcome-email"; const mailofly = new Mailofly(process.env.MAILOFLY_API_KEY!); const emailHtml = await render(); await mailofly.emails.send({ from: "Acme ", to: "sarah@example.com", subject: "Welcome to Acme!", html: emailHtml, }); ``` ## Related topics - [Supabase Go-Live Checklist](/guides/tutorials/supabase-go-live-checklist.md) - [Agent Skills](/guides/ai/agent-skills.md) - [Integrations](/integrations/index.md) - [Delete Template](/api/templates/delete-template.md) - [Create Template](/api/templates/create-template.md)