MCPcopy
hub / github.com/resend/react-email

github.com/resend/react-email @6.6.6 sqlite

repository ↗ · DeepWiki ↗ · release 6.6.6 ↗ · compare 2 versions
2,135 symbols 5,941 edges 1,112 files 10 documented · 0%
README

React email cover

React Email

The next generation of writing emails.

High-quality, unstyled components for creating emails.

Website · GitHub

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

npm i react-email@latest

Getting started

Define your email template with React, include styles and our components where needed.

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.

Editor

React Email also provides an Editor built on top of TipTap and ProseMirror, It serializes to React Email components, and exports email-ready HTML and plain text.

See the Editor documentation 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:

Support

All components were tested using the most popular email clients.

Gmail logo Apple Mail Outlook logo Yahoo! Mail logo HEY logo Superhuman logo
Gmail ✔ Apple Mail ✔ Outlook ✔ Yahoo! Mail ✔ HEY ✔ Superhuman ✔

Development workflow

  1. Setting up your development environment
  2. Running tests
  3. Linting
  4. Building
  5. Writing documentation

Contributing


Brought to you by Resend, MIT License.

Extension points exported contracts — how you extend this code

Spinner (Interface)
(no doc) [3 implementers]
packages/react-email/src/cli/utils/spinner.ts
Spinner (Interface)
(no doc) [3 implementers]
packages/ui/src/utils/spinner.ts
HtmlNode (Interface)
(no doc)
packages/render/src/shared/utils/pretty.ts
EditorEventMap (Interface)
(no doc)
packages/editor/src/core/event-bus.ts
NotionMagicLinkEmailProps (Interface)
(no doc)
packages/create-email/template/emails/notion-magic-link.tsx
StackOverflowTipsEmailProps (Interface)
(no doc)
apps/demo/emails/Community/newsletters/stack-overflow-tips.tsx
Category (Interface)
(no doc)
apps/web/components/structure.ts
EmailProps (Interface)
(no doc)
examples/mailgun/src/email.tsx

Core symbols most depended-on inside this repo

push
called by 162
apps/web/public/js/web-streams-polyfill.js
render
called by 147
packages/render/src/edge/render.tsx
create
called by 93
packages/editor/src/core/serializer/email-mark.ts
extend
called by 83
packages/editor/src/core/serializer/email-mark.ts
t
called by 68
packages/react-email/src/components/code-block/prism.ts
on
called by 62
packages/editor/src/core/event-bus.ts
from
called by 61
packages/editor/src/core/serializer/email-mark.ts
d
called by 59
apps/web/public/js/web-streams-polyfill.js

Shape

Function 1,591
Interface 348
Method 146
Class 50

Languages

TypeScript100%

Modules by API surface

apps/web/public/js/web-streams-polyfill.js331 symbols
packages/ui/src/utils/spinner.ts23 symbols
packages/react-email/src/cli/utils/spinner.ts23 symbols
packages/editor/src/plugins/email-theming/extension.tsx21 symbols
packages/editor/src/extensions/columns.tsx20 symbols
packages/editor/src/extensions/focus-scopes.ts19 symbols
packages/react-email/src/components/code-block/prism.ts16 symbols
packages/react-email/src/components/tailwind/tailwind.spec.tsx12 symbols
packages/editor/src/extensions/global-content.ts12 symbols
packages/ui/src/utils/caniemail/tailwind/get-tailwind-config.ts11 symbols
packages/ui/src/utils/caniemail/ast/get-used-style-properties.ts11 symbols
packages/editor/src/ui/inspector/node.tsx11 symbols

Dependencies from manifests, versioned

@actions/core3.0.0 · 1×
@actions/exec3.0.0 · 1×
@actions/github9.1.0 · 1×
@actions/http-client4.0.0 · 1×
@aws-sdk/client-ses3.1038.0 · 1×
@azure/communication-email1.1.0 · 1×
@babel/core7.29.0 · 1×
@babel/parsercatalog: · 1×
@babel/preset-typescript7.27.0 · 1×
@babel/traversecatalog: · 1×
@biomejs/biome2.4.12 · 1×
@changesets/cli2.31.0 · 1×

For agents

$ claude mcp add react-email \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact