React Email

This gives Claude the context to build React-based email templates that actually work across email clients. It covers the full workflow: scaffolding projects, using the dev server with live preview, composing emails with pre-built components like Button and Container, and rendering to production HTML. The skill enforces practical constraints like pixel-based Tailwind instead of rem units, table-based layouts instead of flexbox, and proper static asset handling between dev and production. It also handles the Resend integration for actually sending the emails. Useful if you're building transactional emails or need to embed an email editor in your app without fighting Outlook's ancient rendering engine.

skills.sh installs: 13.3K
GitHub stars: 211
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add resend/resend-skills --skill react-email --agent claude-code

Installs into .claude/skills of the current project.

Files

React Email

Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.

Installation

npm i react-email

Or scaffold a new project:

npx create-email@latest
cd react-email-starter
npm install
npm run dev

This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.

The dev server runs at localhost:3000 with a preview interface for templates in the emails folder.

Adding to an Existing Project

Install the packages and add a script to your package.json:

{
  "scripts": {
    "email": "email dev --dir emails --port 3000"
  }
}

Make sure the path to the emails folder is relative to the base project directory. Ensure tsconfig.json includes proper support for JSX.

Basic Email Template

Create an email component with proper structure using the Tailwind component for styling:

import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from 'react-email';

interface WelcomeEmailProps {
  name: string;
  verificationUrl: string;
}

SKILL.md on GitHub