Skip to main content

​
Prerequisites

React Email requires Node.js 20.0.0 or higher and works with React 18+ or React 19+.
Before installing React Email, make sure you have:
  • Node.js 20.0.0 or higher
  • A package manager (npm, yarn, or pnpm)
  • React 18+ or React 19+ in your project

​
Quick Start with CLI

The fastest way to get started is with the create-email CLI tool: 
npx create-email
This creates a new emails folder with example email templates and sets up the development environment.

​
Install Component Library

To add React Email to an existing project, install the components package: 
npm install @react-email/components
The -E flag is recommended to install exact versions and avoid potential compatibility issues:
npm install @react-email/components -E

​
What’s Included

The @react-email/components package includes all React Email components in one convenient package:
  • Html - Root email component
  • Head - Email head section
  • Body - Email body wrapper
  • Container - Center content with max-width
  • Section - Group elements together
  • Row & Column - Grid layout system
  • Text - Paragraph text
  • Heading - Headings (h1-h6)
  • Button - Styled link button
  • Link - Hyperlinks
  • Img - Images
  • Hr - Horizontal divider
  • Preview - Email preview text
  • Font - Custom font loading
  • CodeBlock - Syntax highlighted code
  • CodeInline - Inline code
  • Markdown - Render markdown content
  • Tailwind - Tailwind CSS support
  • render - Convert React to HTML

​
Install Individual Packages

You can also install components individually if you prefer a smaller bundle: 
npm install @react-email/button
Installing individual packages gives you more control over your dependencies, but using @react-email/components is simpler and ensures all components work together.

​
Install the Render Package

The render package converts React components to HTML. It’s included in @react-email/components, but can be installed separately: 
npm install @react-email/render
The render package works across multiple environments including Node.js, Edge runtimes (Vercel, Cloudflare Workers), Deno, and browsers.

​
Install Development Tools

For local development with live preview, install the React Email CLI: 
npm install -g react-email

​
CLI Commands

​
email dev
command
Start the development server with live preview
npx react-email dev
​
email export
command
Export emails to static HTML files in an out directory
npx react-email export

​
Peer Dependencies

React Email requires React and React DOM as peer dependencies: 
npm install react@^18 react-dom@^18

​
Verify Installation

Create a simple test file to verify everything is working:
emails/test.tsx
import { Html, Button } from '@react-email/components';

export default function TestEmail() {
  return (
    <Html>
      <Button href="https://example.com">Test Button</Button>
    </Html>
  );
}
Then start the dev server: 
npx react-email dev
If installation was successful, you should see your email in the browser at http://localhost:3000

​
TypeScript Support

React Email is built with TypeScript and includes type definitions out of the box. No additional @types packages are needed. 
import type { FC } from 'react';
import { Button, Html } from '@react-email/components';

interface EmailProps {
  url: string;
}

const Email: FC<Readonly<EmailProps>> = ({ url }) => {
  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
};

​
Next Steps

Quickstart Guide

Build your first email template with React Email

Component Reference

Explore all available components and their props

Build docs developers (and LLMs) love

Get started for freeTalk to us