react-email
React Email provides a framework for building and sending HTML emails using React components. It includes a development server for previewing templates, a library of email-specific components, and an embeddable visual editor.
Is react-email safe to install?
Review the source first: our audit of react-email's source files found 10 shell commands, 0 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands for project scaffolding, development server management, and configuration. It reads and writes email template files and static assets within the project directory.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building transactional or marketing emails who want to use React components and Tailwind CSS for styling.
What can you do with it?
- Building responsive HTML email templates
- Previewing email templates in a local development environment
- Rendering React components to HTML or plain text
- Integrating a visual email editor into a web application
- Sending emails via providers like Resend, Nodemailer, or SendGrid
How good is this skill?
Quality score: 5/10. The documentation is comprehensive, providing clear installation steps, component references, and behavioral guidelines for email development.
What does the skill file contain?
# React Email Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients. ## Installation ```sh npm i react-email ``` Or scaffold a new project: ```sh npx create-email@latest cd react-email-starter npm install npm run dev ``` This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly. The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder. ### Adding to an Existing Project Install the packages and add a script to your `package....
Frequently asked questions
Does React Email support media queries?
No. Most email clients do not support media queries, so the framework recommends alternative layout approaches.
Can I use SVG or WEBP images in my emails?
No. These formats have poor rendering support across email clients. Use PNG or JPG instead.
How do I handle images for both development and production?
Use a conditional base URL pattern that points to the local static folder during development and a production CDN URL when deployed.
What is the purpose of the PreviewProps property?
PreviewProps allows developers to define mock data for testing email templates within the development interface.
Related skills
cold-email
63.5KSales development representatives, founders, and professionals conducting B2B cold outreach
The cold-email skill generates B2B cold outreach emails and follow-up sequences. It prioritizes human-sounding, concise copy that focuses on the recipient's perspective rather than vendor-style pitches. The skill incorporates product marketing context from local files to tailor messaging and utilizes specific frameworks for subject lines, body content, and calls to action.
recipe-email-drive-link
16.7KUsers who need to automate file sharing and email communication within the Google Workspace ecosystem
This skill automates the process of locating a Google Drive file, granting reader permissions to a specific email address, and sending the file link via Gmail.
recipe-label-and-archive-emails
16.6KUsers who manage Gmail accounts via the command line and require automated inbox organization
This skill automates Gmail inbox management by searching for specific messages, applying labels, and removing the inbox label to archive them.
recipe-forward-labeled-emails
16.2KUsers who manage Gmail workflows via the command line and require automated email forwarding based on labels
This skill automates the process of identifying Gmail messages with a specific label and forwarding them to a designated email address.