React Email
Author responsive, client-safe transactional and marketing emails with React Email components and Tailwind-based styling.
Overview
React Email is an agent skill most often used in Build (also Grow lifecycle email) that provides a complete reference for composing Resend-ready email templates with react-email and Tailwind styling.
Install
npx skills add https://github.com/resend/resend-skills --skill react-emailWhat is this skill?
- Complete React Email component reference (Body, Container, Row/Column, Button, Markdown, Preview, etc.)
- Styling via the Tailwind component pattern documented for react-email
- Import discipline: only use components you explicitly import in template code
- CodeBlock and CodeInline patterns for developer-facing transactional messages
- Markdown component for turning markdown into valid react-email template code
- Documents full React Email primitive set including Body, Button, CodeBlock, Markdown, Preview, Row, and Column
Adoption & trust: 2.5k installs on skills.sh; 129 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need transactional or marketing emails that render reliably across clients, but hand-rolled HTML and mystery CSS break in inboxes.
Who is it for?
Solo SaaS builders adding welcome, receipt, and notification emails using React and Resend.
Skip if: Teams that only send plain-text mail or use drag-and-drop ESP builders with no code-based templates.
When should I use this skill?
When implementing or editing Resend-bound email templates that should use react-email components and Tailwind styling.
What do I get? / Deliverables
You implement typed React Email templates with correct imports, layout primitives, and Tailwind styling ready to plug into Resend sending.
- react-email template files with correct imports and layout
- Preview text and inbox-safe component structure for transactional sends
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build/frontend is canonical because the skill is a component reference for implementing email templates in code. Email templates are UI artifacts—layout, typography, buttons—built like frontend views with email-client constraints.
Where it fits
Create a welcome email with Heading, Button, and Container components styled via Tailwind.
Update a dunning or trial-ending template with new Preview text and Markdown body content.
Add a launch announcement email with Img and Link components before go-live.
How it compares
Template reference for react-email components—not an MCP server and not a bulk campaign analytics suite.
Common Questions / FAQ
Who is react-email for?
Indie developers and small teams using React who send mail through Resend and want maintainable, component-based email templates.
When should I use react-email?
During Build when implementing auth, billing, and product emails in your repo, and during Grow when refreshing lifecycle or newsletter templates before a send.
Is react-email safe to install?
Review the Security Audits panel on this Prism page and the resend-skills repository; the skill is documentation-heavy and should not require broad permissions by itself.
SKILL.md
READMESKILL.md - React Email
# React Email Components Reference Complete reference for all React Email components. All examples use the Tailwind component for styling. **Important:** Only import the components you need. Do not use components in the code if you are not importing them. ## Available Components All components are imported from `react-email`: - **Body** - A React component to wrap emails - **Button** - A link that is styled to look like a button - **CodeBlock** - Display code with a selected theme and regex highlighting using Prism.js - **CodeInline** - Display a predictable inline code HTML element that works on all email clients - **Column** - Display a column that separates content areas vertically in your email (must be used with Row) - **Container** - A layout component that centers your content horizontally on a breaking point - **Font** - A React Font component to set your fonts - **Head** - Contains head components, related to the document such as style and meta elements - **Heading** - A block of heading text - **Hr** - Display a divider that separates content areas in your email - **Html** - A React html component to wrap emails - **Img** - Display an image in your email - **Link** - A hyperlink to web pages, email addresses, or anything else a URL can address - **Markdown** - A Markdown component that converts markdown to valid react-email template code - **Preview** - A preview text that will be displayed in the inbox of the recipient - **Row** - Display a row that separates content areas horizontally in your email - **Section** - Display a section that can also be formatted using rows and columns - **Tailwind** - A React component to wrap emails with Tailwind CSS - **Text** - A block of text separated by blank spaces ## Tailwind The recommended way to style React Email components. Wrap your email content and use utility classes. ```tsx import { Tailwind, pixelBasedPreset, Html, Body, Container, Heading, Text, Button } from 'react-email'; export default function Email() { return ( <Html lang="en"> <Tailwind config={{ presets: [pixelBasedPreset], theme: { extend: { colors: { brand: '#007bff', accent: '#28a745' }, }, }, }} > <Body className="bg-gray-100 font-sans"> <Container className="max-w-xl mx-auto p-5"> <Heading className="text-2xl font-bold text-brand mb-4"> Welcome! </Heading> <Text className="text-base text-gray-700 mb-4"> Your content here. </Text> <Button href="https://example.com" className="bg-brand text-white px-6 py-3 rounded-lg block text-center box-border" > Get Started </Button> </Container> </Body> </Tailwind> </Html> ); } ``` **Props:** - `config` - Tailwind configuration object **How it works:** - Tailwind classes are converted to inline styles automatically - Media queries are extracted to `<style>` tag in `<head>` - CSS variables are resolved - RGB color syntax is normalized for email client compatibility **Important:** - Always use `pixelBasedPreset` - email clients don't support `rem` units - Custom config is optional - defaults work well - Avoid responsive classes (sm:, md:, lg:). These have limited email client support, and are not reliable across major clients ## Structural Components ### Html Root wrapper for the email. Always use as the outermost component. ```tsx import { Html, Tailwind, pixelBasedPreset } from 'react-email'; <Html lang="en" dir="ltr"> <Tailwind config={{ presets: [pixelBasedPreset] }}> {/* email content */} </Tailwind> </Html> ``` **Props:** - `lang` - Language code (e.g., "en", "es", "fr") - `dir` - Text direction ("ltr" or "rtl") ### Head Contains head components, related to the document such as style and meta el