🚀 Quick Start
Install and preview:
npm install react-email @react-email/components react
npm run dev # Opens preview server at localhost:3000
All templates are TypeScript-ready and work with Resend, Nodemailer, or any email provider.
Template #01
Welcome Email
Use case: New user onboarding
Friendly welcome message with call-to-action button. Perfect for first impressions.
Props:
- userName - User's name
- productName - Your product name
- loginUrl - Link to login page
<WelcomeEmail
userName="John"
productName="My App"
loginUrl="https://myapp.com"
/>
Template #02
Password Reset
Use case: Password recovery flow
Secure password reset with expiry warning and security tips.
Props:
- userName - User's name
- resetUrl - Password reset link with token
- expiryTime - How long link is valid
<PasswordResetEmail
userName="John"
resetUrl="https://myapp.com/reset?token=xyz"
expiryTime="1 hour"
/>
Template #03
Receipt / Invoice
Use case: Payment confirmations
Professional receipt with itemized breakdown and totals.
Props:
- userName - Customer name
- orderNumber - Order ID
- items - Array of products
- subtotal, tax, total - Price breakdown
<ReceiptEmail
orderNumber="#12345"
items={[{ name, price, quantity }]}
total="$140.37"
/>
Template #04
Notification
Use case: Status updates, alerts
Flexible notification with 4 types: info, success, warning, error. Color-coded banners.
Props:
- notificationType - info | success | warning | error
- title - Notification headline
- message - Main message
- actionUrl, actionText - Optional button
<NotificationEmail
notificationType="success"
title="Build Succeeded"
message="Your deployment completed"
/>
Template #05
Weekly Digest
Use case: Newsletters, roundups
Content digest with multiple items. Includes unsubscribe link for CAN-SPAM compliance.
Props:
- userName - User's name
- weekNumber - Week identifier
- items - Array of digest items
- unsubscribeUrl - Unsubscribe link
<WeeklyDigestEmail
weekNumber="42"
items={[{ title, description, url }]}
unsubscribeUrl="https://myapp.com/unsub"
/>
Template #06
Verification Code
Use case: Email verification, 2FA
Large, clear verification code with expiry warning. Perfect for OTP codes.
Props:
- userName - User's name
- verificationCode - 6-digit code
- expiryTime - How long code is valid
<VerificationEmail
userName="John"
verificationCode="123456"
expiryTime="15 minutes"
/>