Back to React Email

React Email

apps/docs/introduction.mdx

0.0.152.0 KB
Original Source

import Support from '/snippets/support.mdx' import Integrations from '/snippets/integrations.mdx'

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 utility.

<Integrations /> <Support />

Authors