Installation

This guide covers everything you need to know to install and configure ReactUI Email in your project.

System requirements

Before you begin, ensure your development environment meets these requirements:

Node.js: Version 20 or later
React: Version 19 or later (ReactUI Email uses React 19)
Package manager: npm, pnpm, yarn, or bun

ReactUI Email is built with Next.js 15.2+ but works with any React framework including Remix, Vite, or Create React App.

Installation methods

Using a package manager

Install the required dependencies using your preferred package manager:

npm install @react-email/components @react-email/render

Core dependencies

ReactUI Email relies on these essential packages:

Package	Version	Purpose
`@react-email/components`	^0.0.32	React Email component library
`@react-email/render`	1.0.4	Renders React components to HTML
`react`	^19.0.0	React library
`react-dom`	^19.0.0	React DOM library

The @react-email/components package includes all the building blocks you need: Body, Button, Container, Head, Html, Link, Section, Text, and more.

Setting up your project structure

Organize your email templates in a dedicated directory:

your-project/
├── src/
│   ├── emails/              # Email template components
│   │   ├── welcome.tsx
│   │   ├── verification.tsx
│   │   └── password-reset.tsx
│   ├── lib/
│   │   └── email.ts         # Email rendering utilities
│   └── ...
├── package.json
└── tsconfig.json

TypeScript configuration

If you’re using TypeScript, update your tsconfig.json to include path aliases for easier imports:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "preserve",
    "paths": {
      "@/*": ["./src/*"],
      "@email/*": ["./src/emails/*"]
    }
  }
}

Creating a render utility

Create a utility function to render your email templates to HTML:

src/lib/email.ts

import { render as emailRender } from "@react-email/render";
import { JSXElementConstructor, ReactElement } from "react";

export const render = async (
  template: ReactElement<unknown, string | JSXElementConstructor<unknown>>,
) => {
  const html = await emailRender(template, {
    pretty: true,
  });

  return html;
};

This utility can be used to render any email template:

import { render } from "@/lib/email";
import WelcomeEmail from "@/emails/welcome";

const html = await render(<WelcomeEmail />);

Installing email templates

ReactUI Email templates are available in the GitHub repository. You can copy individual templates directly into your project:

Browse available templates

Visit the Templates section to see all available email templates organized by category:

Supabase-style templates
Notion-style templates
Framer-style templates
MynaUI-style templates
And more

Copy template code

Navigate to the template you want in the source repository at:

src/email/[template-name]/[email-name].tsx

Copy the entire component code.

Paste into your project

Create a new file in your src/emails/ directory and paste the template code:

src/emails/welcome.tsx

// Paste template code here

Customize the template

Modify the template to match your brand:

Update colors in the Tailwind config
Change text content
Add your logo and images
Adjust spacing and layout

Make sure to update all placeholder content (URLs, images, company names) before using templates in production.

Configuring Tailwind CSS

ReactUI Email uses Tailwind CSS for styling. Each template includes its own Tailwind configuration:

import { Tailwind } from "@react-email/components";

export default function MyEmail() {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: "#155dfc",
              // Add your custom colors
            },
          },
        },
      }}
    >
      {/* Email content */}
    </Tailwind>
  );
}

You can customize the Tailwind configuration for each template independently.

Setting up email sending

To send emails, you’ll need to integrate an email service provider. Here are setup examples for popular services:

Using Resend

npm install resend

Using Plunk

npm install @plunk/node

Using Nodemailer

npm install nodemailer
npm install -D @types/nodemailer

Environment variables

Store sensitive configuration in environment variables:

.env.local

# For Resend
RESEND_API_KEY=re_your_api_key_here

# For Plunk
PLUNK_API_KEY=your_plunk_api_key_here

# For SMTP (Nodemailer)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=[email protected]
SMTP_PASSWORD=your_app_password

Never commit your .env files to version control. Add them to .gitignore.

Previewing emails during development

For local development, you can preview emails in the browser:

Create a preview route in your Next.js app:

app/preview/email/route.tsx

import { render } from "@/lib/email";
import WelcomeEmail from "@/emails/welcome";
import { NextResponse } from "next/server";

export async function GET() {
  const html = await render(<WelcomeEmail />);
  return new NextResponse(html, {
    headers: { "Content-Type": "text/html" },
  });
}

Visit http://localhost:3000/preview/email to see the rendered email

For a better preview experience, consider using React Email Dev which provides a UI for previewing and testing emails.

Troubleshooting

Common issues and solutions

TypeScript errors with React Email components

Make sure you have the correct React types installed:

npm install -D @types/react @types/react-dom

Ensure your TypeScript version is 5.0 or later.

Tailwind styles not applying

Each email template needs its own Tailwind configuration wrapped in the <Tailwind> component. Make sure you’re importing it from @react-email/components.

Images not loading in emails

Use absolute URLs for all images. Email clients don’t support relative paths. Host images on a CDN or public server:

// Good
<Img src="https://yourdomain.com/logo.png" />

// Bad
<Img src="/logo.png" />

Emails look different in various clients

This is normal. Email clients have different rendering engines. Always test in multiple clients:

Gmail (web and mobile)
Outlook (desktop and web)
Apple Mail
iOS Mail

Use services like Litmus or Email on Acid for comprehensive testing.

Next steps

Now that you have ReactUI Email installed, you can:

Browse templates

Explore all available email templates

Learn customization

Customize templates to match your brand

Tailwind styling guide

Master Tailwind CSS in email templates

Sending emails guide

Learn best practices for sending emails

Get Started

Templates

Components

Guides

System requirements

Installation methods

Using a package manager

Core dependencies

Setting up your project structure

TypeScript configuration

Creating a render utility

Installing email templates

Configuring Tailwind CSS

Setting up email sending

Using Resend

Using Plunk

Using Nodemailer

Environment variables

Previewing emails during development

Troubleshooting

Common issues and solutions

Next steps

Browse templates

Learn customization

Tailwind styling guide

Sending emails guide

Build docs developers (and LLMs) love

Get Started

Templates

Components

Guides

​System requirements

​Installation methods

​Using a package manager

​Core dependencies

​Setting up your project structure

​TypeScript configuration

​Creating a render utility

​Installing email templates

​Configuring Tailwind CSS

​Setting up email sending

​Using Resend

​Using Plunk

​Using Nodemailer

​Environment variables

​Previewing emails during development

​Troubleshooting

​Common issues and solutions

​Next steps

Browse templates

Learn customization

Tailwind styling guide

Sending emails guide

Build docs developers (and LLMs) love

System requirements

Installation methods

Using a package manager

Core dependencies

Setting up your project structure

TypeScript configuration

Creating a render utility

Installing email templates

Configuring Tailwind CSS

Setting up email sending

Using Resend

Using Plunk

Using Nodemailer

Environment variables

Previewing emails during development

Troubleshooting

Common issues and solutions

Next steps