React Email 6 · Tailwind CSS · TypeScript
32 email templates that look right in every inbox
Welcome, receipts, invoices, password resets, order updates, newsletters and more. Typed React components with dark mode, mobile layouts and plain-text versions, ready to send with Resend or any SMTP provider.
- templates
- 32
- templates
- categories
- 6
- categories
- per email
- ≤ 21 KB
- per email
- color schemes
- Light & dark
- color schemes
All templates
Click any template to preview it on desktop and mobile, in light and dark mode.
Auth
Welcome
Onboarding email with a three-step checklist and a link to the docs.
Auth
Verify email
Email confirmation link with a copy-paste fallback and expiry.
Auth
Magic link
Passwordless sign-in with the device and location of the request.
Auth
Login code (OTP)
One-time code in a large, letter-spaced box.
Auth
Reset password
Password reset link with expiry and a reassurance note.
Auth
Password changed
Security confirmation with details and a 'wasn't you?' action.
Auth
New sign-in alert
Unrecognized device alert with device, location, IP and time.
Team
Team invitation
Invitation with the inviter's avatar, team and role.
Team
Member joined
Admin notification with the new member and seat usage.
Team
Email change
Confirm a change of account email, showing old and new addresses.
Team
Account deleted
Deletion confirmation with a restore window and feedback link.
Billing
Payment receipt
Receipt with number, payment method, line items, tax and total.
Billing
Invoice
Invoice with amount due, due date, lines and a pay button.
Billing
Payment failed
Dunning email with the failure reason and next retry date.
Billing
Trial ending
Trial reminder with usage stats and what upgrading keeps.
Billing
Plan changed
Upgrade or downgrade confirmation with a before/after comparison.
Billing
Subscription canceled
Cancellation with access end date, export and reactivation links.
Billing
Refund issued
Refund confirmation with amount, card, reason and timing.
Product
Usage alert
Quota warning with a progress bar that turns amber and red.
Product
Weekly digest
Stats with week-over-week change, top pages and highlights.
Product
Mention / comment
Comment notification with avatar, context and reply button.
Product
Export ready
Download link for a generated file with size and expiry.
Product
Feature announcement
Launch email with hero image, three highlights and a CTA.
Commerce
Order confirmation
Products with images, discounts, totals, address and delivery estimate.
Commerce
Shipping update
Four-stage tracker, carrier details and the items shipped.
Commerce
Order delivered
Delivery confirmation with a review prompt and returns link.
Commerce
Abandoned cart
Cart reminder with products, subtotal and an optional discount code.
Commerce
Review request
One-tap star rating that links to your review page.
Marketing
Newsletter
Featured story, two-column article grid and quick links.
Marketing
Promo / sale
Bold offer banner, coupon code and a 2×2 product grid.
Marketing
Webinar invite
Event details, agenda, speakers and add-to-calendar links.
Marketing
Win-back
Re-engagement email with what's new and an optional offer.
Everything you need to ship emails
Typed React components
Every template is a .tsx file with typed props and realistic preview data.
Dark mode
Surfaces, text and accents adapt in clients that support prefers-color-scheme.
Mobile friendly
Single-column layouts that tighten their padding on phones.
Plain-text versions
Clean text output for every template, for better deliverability.
Send with anything
Examples for Resend, Nodemailer/SMTP and a standard API route.
Tested sizes
A check script renders all 32 and keeps them far below Gmail's 102 KB clip.
One brand file
Name, colors, logo, address and social links in a single config.
Compliance built in
Unsubscribe links, postal address and 'why you got this' footers.
import { Resend } from "resend";
import WelcomeEmail from "./emails/auth/welcome";
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: "Acme <hello@acme.com>",
to: user.email,
subject: "Welcome to Acme 👋",
react: WelcomeEmail({ name: user.firstName, dashboardUrl, docsUrl }),
});Questions
Ship better emails today
All 32 templates, the shared components, examples and free lifetime updates.
Get Kairo Mail