> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React Email

> Build and send emails using React and TypeScript.

## Why

We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in {new Date().getFullYear()} and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.

## Getting Started

React Email is designed to be incrementally adopted, so you can add it to most codebases in a few minutes.

<CardGroup>
  <Card title="Automatic Setup" icon="download" href="/getting-started/automatic-setup">
    Add React Email to any JavaScript or TypeScript project in minutes.
  </Card>

  <Card title="Manual Setup" icon="hammer" href="/getting-started/manual-setup">
    Create a brand-new folder with packages powered by React Email.
  </Card>
</CardGroup>

## Components

This is a set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

<CardGroup>
  <Card title="HTML" icon="file-code" href="/components/html">
    A React html component to wrap emails.
  </Card>

  <Card title="Container" icon="grid" href="/components/container">
    The main wrapper that hold your content.
  </Card>

  <Card title="Button" icon="b" href="/components/button">
    A React button component to help build emails.
  </Card>

  <Card title="Text" icon="text-size" href="/components/text">
    A block of text separated by blank spaces.
  </Card>
</CardGroup>

## Integrations

In order to use React Email with any email service provider, you'll need to convert the components made with React into a HTML string. This is done using the [render](/utilities/render) utility.

<CardGroup>
  <Card title="Resend" href="/integrations/resend">
    Send email using Resend
  </Card>

  <Card title="Nodemailer" href="/integrations/nodemailer">
    Send email using Nodemailer
  </Card>

  <Card title="Mailgun" href="/integrations/mailgun">
    Send email using Mailgun
  </Card>

  <Card title="SendGrid" href="/integrations/sendgrid">
    Send email using SendGrid
  </Card>

  <Card title="Postmark" href="/integrations/postmark">
    Send email using Postmark
  </Card>

  <Card title="AWS SES" href="/integrations/aws-ses">
    Send email using AWS SES
  </Card>

  <Card title="MailerSend" href="/integrations/mailersend">
    Send email using MailerSend
  </Card>

  <Card title="Scaleway" href="/integrations/scaleway">
    Send email using Scaleway
  </Card>

  <Card title="Plunk" href="/integrations/plunk">
    Send email using Plunk
  </Card>
</CardGroup>

## Support

All components were tested using the most popular email clients.

<div
  role="list"
  className="grid py-2 list-none border rounded-xl text-sm"
  style={{
gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
columnGap: '0.5rem',
borderColor: 'rgb(30 41 59/1)'
}}
>
  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img src="https://react.email/static/icons/gmail.svg" width="56px" height="56px" alt="Gmail" className="mx-auto mb-1" />

    Gmail
  </div>

  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img src="https://react.email/static/icons/apple-mail.svg" width="56px" height="56px" alt="Apple Mail" className="mx-auto mb-1" />

    Apple Mail
  </div>

  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img src="https://react.email/static/icons/outlook.svg" width="56px" height="56px" alt="Outlook" className="mx-auto mb-1" />

    Outlook
  </div>

  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img src="https://react.email/static/icons/yahoo-mail.svg" width="56px" height="56px" alt="Yahoo! Mail" className="mx-auto mb-1" />

    Yahoo! Mail
  </div>

  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img src="https://react.email/static/icons/hey.svg" width="56px" height="56px" alt="HEY" className="mx-auto mb-1" />

    HEY
  </div>

  <div className="text-center block not-prose group relative my-2 ring-2 ring-transparent overflow-hidden">
    <img src="https://react.email/static/icons/superhuman.svg" width="56px" height="56px" alt="Superhuman" className="mx-auto mb-1" />

    Superhuman
  </div>
</div>

Brought to you by [Resend](https://resend.com), MIT License.