Skip to main content
This guide will help you send your first email using ReactUI Email in under 5 minutes.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js 20 or later installed
  • A React or Next.js project (or create a new one)
  • An email service provider (like Resend, SendGrid, or Nodemailer)
1

Install dependencies

Install ReactUI Email and React Email components using your preferred package manager:
npm install @react-email/components @react-email/render
The @react-email/render package is used to convert React components into HTML that can be sent via email.
2

Copy an email template

Browse the available templates in the source repository and copy one to your project. For example, create a welcome email:
src/emails/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Section,
  Tailwind,
  Text,
} from "@react-email/components";

export default function WelcomeEmail() {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Tailwind>
        <Body className="font-sans">
          <Container className="mx-auto my-[20px] px-4 py-5">
            <Section className="mt-8">
              <Heading className="text-2xl font-bold">Welcome!</Heading>
              <Text className="text-base">
                Thanks for joining us. We're excited to have you on board.
              </Text>
              <Text className="text-base">
                Get started by exploring our platform and setting up your profile.
              </Text>
            </Section>
            <Section className="mt-8">
              <Link 
                href="https://yourapp.com/get-started"
                className="bg-blue-600 text-white px-6 py-3 rounded-lg"
              >
                Get Started
              </Link>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}
You can find complete, production-ready templates in the Templates section.
3

Render the template to HTML

Use the render function from @react-email/render to convert your React component to HTML:
src/lib/email.ts
import { render } from "@react-email/render";
import WelcomeEmail from "@/emails/welcome";

export async function getWelcomeEmailHtml() {
  const html = await render(<WelcomeEmail />, {
    pretty: true,
  });
  return html;
}
The pretty option formats the HTML output for better readability during development.
4

Send the email

Use your email service provider to send the rendered HTML. Here’s an example using Nodemailer:
src/lib/send-email.ts
import nodemailer from "nodemailer";
import { getWelcomeEmailHtml } from "./email";

const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: parseInt(process.env.SMTP_PORT || "587"),
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASSWORD,
  },
});

export async function sendWelcomeEmail(to: string) {
  const html = await getWelcomeEmailHtml();
  
  await transporter.sendMail({
    from: "[email protected]",
    to,
    subject: "Welcome to our platform!",
    html,
  });
}
You can also use modern email services like Resend or Plunk for easier integration.
ReactUI Email works seamlessly with any email service that accepts HTML content:

Resend

Modern email API with React Email support built-in

SendGrid

Reliable transactional email service

Plunk

Simple email API for developers

Nodemailer

Traditional SMTP for self-hosted solutions

​
Next steps

Now that you’ve sent your first email, you can:
Always test your emails across different email clients before sending to production. Email rendering can vary significantly between clients.

Build docs developers (and LLMs) love

Get started for freeTalk to us