react-email-templates

# React Email Templates Skill

Comprehensive patterns and templates for building modern, responsive email templates using React Email components and JSX, with preview server setup and Resend integration.

## Use When

- Building reusable email components with React JSX
- Creating responsive email templates that work across clients
- Setting up React Email preview servers for development
- Integrating React Email with Resend for dynamic content
- Implementing welcome, transactional, and marketing emails
- Styling emails with Tailwind CSS via @react-email/components
- Testing email layouts before sending
- Creating component libraries for email templates

## Core Concepts

### What is React Email

React Email is a library for building responsive, maintainable emails using React components and JSX. It provides:

- **JSX Templates**: Write email templates as React components
- **Built-in Components**: Email-safe components (Container, Row, Column, Text, Image, etc.)
- **Styling**: Tailwind CSS support with safe subset for email clients
- **Preview Server**: Built-in development server to test email rendering
- **Type Safety**: Full TypeScript support for email props
- **Framework Agnostic**: Send emails with Resend, SendGrid, Nodemailer, etc.

### Installation

```bash
npm install react-email @react-email/components
# or
yarn add react-email @react-email/components
```

### Package Structure

```typescript
// Core React Email
import { render } from 'react-email';

// Components
import {
  Body,
  Button,
  Column,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Text,
  Font,
  Head as EmailHead,
} from '@react-email/components';
```

## Core Patterns

### 1. Basic Email Component

**Simple, responsive email template structure:**

```typescript
import { Body, Container, Head, Html, Preview, Section, Text } from '@react-email/components';

interface BasicEmailProps {
  userName: string;
  message: string;
}

export const BasicEmail: React.