# Create HTML email templates with React

Building HTML emails from scratch is complex due to inconsistent email client support. React Email provides a component-based approach with Tailwind CSS styling that works across Gmail, Outlook, Apple Mail, and other major email clients.

## Install

```bash
npx skillstore add resend/react-email
```

## Metadata

- - Slug: resend-react-email
- - Version: 1.0.0
- - Author: resend
- - GitHub username: resend
- - License: MIT
- - Repository: https://github.com/resend/react-email/tree/main/skills/react-email/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: safe
- - Quality score: 82
- - Quality tier: silver
- - Public page: https://skillstore.pages.dev/skills/resend-react-email
- - Manifest: https://skillstore.pages.dev/api/skills/resend-react-email/manifest

## Capabilities

- Create responsive HTML email templates using React components with proper email client compatibility
- Apply Tailwind CSS styling with pixel-based presets for consistent rendering across email clients
- Implement internationalization using next-intl, react-i18next, or react-intl libraries
- Integrate with Resend SDK and other email service providers for sending emails
- Convert React components to HTML and plain text for email compatibility
- Structure emails with proper semantic HTML, accessible images, and mobile-responsive layouts

## Use Cases

- Build transactional email templates: Create welcome emails, password resets, order confirmations, and notification emails using React components with consistent branding.
- Design marketing newsletter layouts: Develop responsive newsletter templates with multi-column layouts, styled buttons, and professional typography that renders correctly across email clients.
- Implement email internationalization: Add multi-language support to email templates using standard i18n libraries for localized content delivery.

## Prompt Templates

### Basic welcome email

```
Create a welcome email template for a new user signup. Use the React Email components with Tailwind CSS. Include a heading 'Welcome!', a paragraph greeting the user by name, and a 'Verify Email' button linking to a verification URL. Use brand color #007bff for the button. Make it professional and minimal.
```

### Order confirmation with items

```
Create an order confirmation email showing a list of purchased items with prices, quantities, and a total. Include shipping address, order number, and estimated delivery date. Use a clean table-based layout with product images.
```

### Multi-language notification

```
Create an internationalized notification email using next-intl. Include locale-based message files structure. Show how to dynamically load messages based on user locale and render translated content in the email template.
```

### Dark mode email variant

```
Create an email template with dark mode support. When dark mode is detected, use container black (#000) background, dark gray (#151516) content background, and ensure text remains readable. Include both light and dark mode styles.
```

## Limitations

- Email clients do not support SVG images, flexbox, grid, or CSS media queries
- All styling must use inline styles or Tailwind utility classes with pixel-based presets
- Requires verified domains for production email sending with most providers
- Template variables should not use \{\{variable\}\} syntax directly in React components

## Best Practices

- Use the pixelBasedPreset for Tailwind configuration to ensure consistent rendering across email clients that do not support rem units
- Always include PreviewProps on components for local development testing and preview in React Email dev server
- Test templates across major email clients \(Gmail, Outlook, Apple Mail\) before production deployment

## Anti Patterns

- Using flexbox, grid, or CSS media queries - these are not supported by most email clients
- Hardcoding template variables like \{\{name\}\} directly in JSX - use props.name instead
- Using SVG or WEBP images - these have inconsistent support across email clients

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-02-07T09:00:00\+00:00
- - Summary: This is a legitimate documentation skill for the open-source React Email library. All 654 static findings are false positives triggered by documentation patterns. The flagged 'external\_commands' are markdown code blocks showing CLI commands. 'Network' patterns are documentation links and example URLs. 'Environment variable access' uses standard patterns for email service configuration. No actual security risks present.

## Stats

- - Views: 126
- - Downloads: 6
- - Favorites: 0
- - Popularity score: 0