mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
77ebd6632f
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
74 lines
2.1 KiB
Plaintext
74 lines
2.1 KiB
Plaintext
---
|
|
title: 'React Email'
|
|
sidebarTitle: 'Introduction'
|
|
description: 'Build and send emails using React and TypeScript.'
|
|
'og:image': 'https://react.email/static/covers/react-email.png'
|
|
icon: 'hand-wave'
|
|
---
|
|
|
|
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](/utilities/render) utility.
|
|
|
|
<Integrations />
|
|
|
|
<Support />
|
|
|
|
Brought to you by [Resend](https://resend.com), MIT License.
|
|
|