react-email
8.191 instalações · resend/react-email
Open source Repository Open in the app JSON README (API)
About
Skill publicada por resend/react-email, com 8.191 instalações medidas pelo skills.sh. Instale com: npx skills add resend/react-email@react-email
Details
- Kind
- Agent skills
- Topic
- Communication
- Publisher
- resend
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 19,710
- Forks
- 1,077
- Open pull requests
- 26
- Last push
- 2026-09-03T19:54:32Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-08-30 15:21:20
- Updated
- 2026-08-31 16:00:44
- Origin id
resend/react-email/react-email
README
<div align="center"><strong>React Email</strong></div>
<div align="center">The next generation of writing emails.<br />High-quality, unstyled components for creating emails.</div>
<br />
<div align="center">
<a href="https://react.email">Website</a>
<span> · </span>
<a href="https://github.com/resend/react-email">GitHub</a>
</div>
## Introduction
A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.
## 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 2026 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.
## Install
```sh
npm i react-email@latest
```
## Getting started
Define your email template with React, include styles and our components where needed.
```jsx
import { Button } from "react-email";
export default function Email() {
return (
<Button href="https://example.com" style={{ color: "#61dafb" }}>
Click me
</Button>
);
};
```
## Components
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.
- [Html](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/html)
- [Head](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/head)
- [Button](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/button)
- [Container](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/container)
- [CodeBlock](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/code-block)
- [CodeInline](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/code-inline)
- [Column](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/column)
- [Row](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/row)
- [Font](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/font)
- [Heading](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/heading)
- [Divider](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/hr)
- [Image](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/img)
- [Link](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/link)
- [Markdown](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/markdown)
- [Preview](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/preview)
- [Section](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/section)
- [Tailwind](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/tailwind)
- [Paragraph](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/text)
- [Body](https://github.com/resend/react-email/tree/main/packages/react-email/src/components/body)
## Editor
React Email also provides an Editor built on top of [TipTap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/), It serializes to React Email components, and exports email-ready HTML and plain text.
See the [Editor documentation](https://react.email/docs/editor) for more details.
## Integrations
Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:
- [Resend](https://github.com/resend/react-email/tree/main/examples/resend)
- [Nodemailer](https://github.com/resend/react-email/tree/main/examples/nodemailer)
- [SendGrid](https://github.com/resend/react-email/tree/main/examples/sendgrid)
- [MailerSend](https://github.com/resend/react-email/tree/main/examples/mailersend)
- [Mailgun](https://github.com/resend/react-email/tree/main/examples/mailgun)
- [Postmark](https://github.com/resend/react-email/tree/main/examples/postmark)
- [AWS SES](https://github.com/resend/react-email/tree/main/examples/aws-ses)
- [Azure Communication Email](https://github.com/resend/react-email/tree/main/examples/azure-communication-email)
- [Plunk](https://github.com/resend/react-email/tree/main/examples/plunk)
- [Scaleway](https://github.com/resend/react-email/tree/main/examples/scaleway)
## Support
All components were tested using the most popular email clients.
| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
## Development workflow
1. [Setting up your development environment](https://react.email/docs/contributing/development-workflow/1-setup)
2. [Running tests](https://react.email/docs/contributing/development-workflow/2-running-tests)
3. [Linting](https://react.email/docs/contributing/development-workflow/3-linting)
4. [Building](https://react.email/docs/contributing/development-workflow/4-building)
5. [Writing documentation](https://react.email/docs/contributing/development-workflow/5-writing-docs)
## Contributing
- [Contribution Guide](https://react.email/docs/contributing)
---
Brought to you by [Resend](https://resend.com), MIT License.