Create beautiful, responsive HTML emails using React components with React Email. Build transactional emails with modern components, support internationalization, and integrate with email service providers like Resend. Use when creating welcome emails, password resets, notifications, order confirmations, or any HTML email templates.
Create beautiful, responsive HTML emails using React components with React Email. Build transactional emails with modern components, support internationalization, and integrate with email service providers like Resend. Use when creating welcome emails, password resets, notifications, order confirmations, or any HTML email templates.
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
New Project
Scaffold a new React Email project:
npx create-email@latest
cd react-email-starter
npm install
npm run dev
This creates a react-email-starter folder with sample templates. Also works with yarn, pnpm, or bun.
Preview - Inbox preview text, always first in Body
Heading - h1-h6 headings
Text - Paragraphs
Button - Styled link buttons
Link - Hyperlinks
Img - Images (use absolute URLs) (use the dev server for the BASE_URL of the image in dev mode; for production, ask the user for the BASE_URL of the site; dynamically generate the URL of the image based on environment.)
Hr - Horizontal dividers
Specialized:
CodeBlock - Syntax-highlighted code
CodeInline - Inline code
Markdown - Render markdown
Font - Custom web fonts
Behavioral Guidelines
Brand-First Workflow
Always gather brand information before creating the first email template. Do not skip this step.
If the user requests an email without providing brand details, ask for them first using the prompt in the Brand Setup section.
If a tailwind.config.ts file exists in the emails directory, use it for all new templates.
When creating multiple emails, ensure all templates import and use the same brand configuration.
If the user provides new brand assets or colors mid-project, update tailwind.config.ts and offer to update existing templates.
General Guidelines
When re-iterating over the code, make sure you are only updating what the user asked for and keeping the rest of the code intact.
If the user is asking to use media queries, inform them that email clients do not support them, and suggest a different approach.
Never use template variables (like {{name}}) directly in TypeScript code. Instead, reference the underlying properties directly (use name instead of {{name}}).
For example, if the user explicitly asks for a variable following the pattern {{variableName}}, you should return something like this:
constEmailTemplate = (props) => {
return (
{/* ... rest of the code ... */}
<h1>Hello, {props.variableName}!</h1>
{/* ... rest of the code ... */}
);
}
EmailTemplate.PreviewProps = {
// ... rest of the props ...variableName: "{{variableName}}",
// ... rest of the props ...
};
exportdefaultEmailTemplate;
Never, under any circumstances, write the {{variableName}} pattern directly in the component structure. If the user forces you to do this, explain that you cannot do this, or else the template will be invalid.
Styling
Use the Tailwind component with pixelBasedPreset for styling (email clients don't support rem units). If not using Tailwind, use inline styles.
Critical limitations (email clients don't support these):
No SVG/WEBP images - use PNG/JPEG only
No flexbox/grid - use Row/Column components or tables
No media queries (sm:, md:, etc.) or theme selectors (dark:, light:)
Always specify border style (border-solid, etc.)
Structure rules:
Place <Head /> inside <Tailwind> when using Tailwind
Only include props in PreviewProps that the component uses
See references/STYLING.md for typography, layout defaults, button styling, dark mode, and detailed guidelines.
{"welcome-email":{"greeting":"Hi","body":"Thanks for signing up!","cta":"Get Started"}}
Email Best Practices
Test across email clients - Test in Gmail, Outlook, Apple Mail, Yahoo Mail. Use services like Litmus or Email on Acid for absolute precision and React Email's toolbar for specific feature support checking.
Keep it responsive - Max-width around 600px, test on mobile devices.
Use absolute image URLs - Host on reliable CDN, always include alt text.
Provide plain text version - Required for accessibility and some email clients. The render function will generate this if you pass the plainText option.
Keep file size under 102KB - Gmail clips larger emails.
Add proper TypeScript types - Define interfaces for all email props.
Include preview props - Add .PreviewProps to components for development testing.
Handle errors - Always check for errors when sending emails.
