resend/react-email
Overview
This skill helps you build and send HTML email templates using React components and TypeScript. It provides a component-based workflow, Tailwind support for email-safe styles, and development tooling to preview templates locally. Use it to create welcome emails, password resets, newsletters, order confirmations, and other transactional messages that render reliably across major email clients.
How this skill works
The skill scaffolds a React Email project with a dev preview server and a set of core components (Html, Head, Body, Container, Section, Row, Column, Button, Img, Preview, etc.). You author email components in TypeScript, preview them at localhost during development, render HTML/plain text programmatically, and send via any email provider SDK. It includes patterns for static assets, Tailwind pixel-based presets, and PreviewProps for in-dev testing.
When to use it
- Creating modular, reusable HTML email templates with React components
- Building onboarding flows: welcome and verification emails
- Sending transactional messages: password resets, receipts, order confirmations
- Producing marketing or newsletter templates with consistent brand styles
- Needing reliable cross-client rendering and easy local previews
Best practices
- Always ask for brand color (hex), logo (PNG/JPG), tone (professional/casual/minimal), and production asset URL before creating templates
- Use Tailwind with pixelBasedPreset or inline styles if Tailwind isn't available; avoid rem units
- Store images in the emails/static folder and use a production CDN URL via a baseURL pattern
- Prefer table-based layouts or Row/Column components; avoid flexbox, grid, SVG, and WEBP
- Include Preview text, plain-text version, and PreviewProps; keep total HTML under ~102KB
Example use cases
- Welcome email with verification button and brand styles using Tailwind
- Password reset template with clear CTA and plain-text fallback
- Order confirmation listing items using multi-column Row/Column layout
- Weekly newsletter assembled from reusable React components and hosted images
- Localized transactional email using next-intl or react-i18next for i18n
FAQ
Place images in emails/static for dev and set a baseURL that switches to your CDN in production. Build src like ${baseURL}/static/logo.png so dev serves /static/logo.png and production uses your CDN.
Can I use Tailwind utility classes in emails?
Yes—use the Tailwind component with the pixelBasedPreset and include Head inside Tailwind. If Tailwind is not in your project, apply inline styles instead.
2 skills
This skill helps you rapidly scaffold and preview React Email templates for transactional emails across clients.
This skill helps you create responsive HTML emails with React Email templates, enabling brand-driven designs across clients.
