Build beautiful emails with React Email components
✓Works with OpenClaudeYou are a React email template developer. The user wants to build beautiful, responsive emails using React Email components and send them via SMTP or email service APIs.
What to check first
- Run
npm list react-emailto verify the package is installed - Check that you have Node.js 16+ (React Email requires it)
- Confirm your email service credentials are available (Resend, SendGrid, Nodemailer, etc.)
Steps
- Install React Email:
npm install react-email mjml - Create a
.tsxemail template file in your project root or anemails/folder - Import base components:
Container,Head,Html,Body,Section,Text,Button,Img,Link - Structure your email with
<Html>,<Head>, and<Body>as root elements - Use
Containerfor width constraints (typicallymax-width: 580px) and responsive padding - Style with the
styleprop object notation (not CSS classes — inline styles only) - Use
render()to convert JSX to HTML string:import { render } from 'react-email' - Send via your email service using the rendered HTML output
Code
import {
Html,
Body,
Container,
Head,
Hr,
Img,
Link,
Preview,
Row,
Section,
Text,
Button,
} from 'react-email';
import * as React from 'react';
export const WelcomeEmail = ({ userName }: { userName: string }) => (
<Html>
<Head>
<Preview>Welcome to our platform</Preview>
</Head>
<Body style={{ fontFamily: 'sans-serif', backgroundColor: '#f5f5f5' }}>
<Container style={{ maxWidth: '580px', margin: '0 auto', padding: '20px' }}>
<Section style={{ backgroundColor: '#ffffff', borderRadius: '8px', padding: '40px' }}>
<Img
src="https://example.com/logo.png"
width="100"
height="auto"
alt="Logo"
style={{ marginBottom: '20px' }}
/>
<Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
Welcome, {userName}! 🎉
</Text>
<Text style={{ fontSize: '16px', color: '#666', lineHeight: '1.6', marginBottom: '20px' }}>
Thanks for signing up. We're excited to have you on board. Get started by exploring your dashboard.
</Text>
<Button
href="https://example.com/dashboard"
style={{
backgroundColor: '#007bff',
color: '#ffffff',
padding: '12px 24px',
Note: this example was truncated in the source. See the GitHub repo for the latest full version.
Common Pitfalls
- Treating this skill as a one-shot solution — most workflows need iteration and verification
- Skipping the verification steps — you don't know it worked until you measure
- Applying this skill without understanding the underlying problem — read the related docs first
When NOT to Use This Skill
- When a simpler manual approach would take less than 10 minutes
- On critical production systems without testing in staging first
- When you don't have permission or authorization to make these changes
How to Verify It Worked
- Run the verification steps documented above
- Compare the output against your expected baseline
- Check logs for any warnings or errors — silent failures are the worst kind
Production Considerations
- Test in staging before deploying to production
- Have a rollback plan — every change should be reversible
- Monitor the affected systems for at least 24 hours after the change
Related Email Skills
Other Claude Code skills in the same category — free to download.
MJML Templates
Create responsive email templates with MJML
Email Preview
Set up email preview and testing in development
Transactional Email
Build transactional email system with Resend or SendGrid
Email Queue
Queue and batch email sending for reliability
Email Unsubscribe
Implement email preference center and unsubscribe handling
Email Deliverability Audit
Audit your email setup (SPF, DKIM, DMARC, BIMI) to maximize inbox placement
Email Template Design
Build email templates that render correctly in Gmail, Outlook, and Apple Mail
Want a Email skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.