{"slug":"resend-react-email-be052d16","name":"react-email","description":"Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.","long_description":"---\nname: react-email\ndescription: Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.\nlicense: MIT\nmetadata:\n author: Resend\n version: \"2.1.0\"\n homepage: https://react.email\n source: https://github.com/resend/react-email\n openclaw:\n install:\n - kind: node\n package: react-email\n label: React Email\n links:\n repository: https://github.com/resend/react-email\n documentation: https://resend.com/docs/react-email-skill\n---\n\n# React Email\n\nBuild and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.\n\n## Installation\n\n```sh\nnpm i react-email\n```\n\nOr scaffold a new project:\n\n```sh\nnpx create-email@latest\ncd react-email-starter\nnpm install\nnpm run dev\n```\n\nThis works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.\n\nThe dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.\n\n### Adding to an Existing Project\n\nInstall the packages and add a script to your `package.json`:\n\n```json\n{\n \"scripts\": {\n \"email\": \"email dev --dir emails --port 3000\"\n }\n}\n```\n\nMake sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.\n\n## Basic Email Template\n\nCreate an email component with proper structure using the Tailwind component for styling:\n\n```tsx\nimport {\n Html,\n Head,\n Preview,\n Body,\n Container,\n Heading,\n Text,\n Button,\n Tailwind,\n pixelBasedPreset\n} from 'react-email';\n\ninterface WelcomeEmailProps {\n name: string;\n verificationUrl: string;\n}\n\nexport default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {\n return (\n \n \n \n \n Welcome - Verify your email\n \n \n Welcome!\n \n \n Hi {name}, thanks for signing up!\n \n \n Verify Email\n \n \n \n \n \n );\n}\n\n// Preview props for testing\nWelcomeEmail.PreviewProps = {\n name: 'John Doe',\n verificationUrl: 'https://example.com/verify/abc123'\n} satisfies WelcomeEmailProps;\n\nexport { WelcomeEmail };\n```\n\n## Behavioral Guidelines\n\n- When iterating over the code, only update what the user asked for. Keep the rest intact.\n- If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach.\n- Never use template variables (like `{{name}}`) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for `{{variableName}}`, place the mustache string only in PreviewProps, never in the component JSX:\n\n```typescript\nconst EmailTemplate = (props) => {\n return (\n Hello, {props.variableName}!
\n );\n}\n\nEmailTemplate.PreviewProps = {\n variableName: \"{{variableName}}\",\n};\n\nexport default EmailTemplate;\n```\n\n- Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid.\n\n## Essential Components\n\nSee [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation.\n\n**Core Structure:**\n- `Html` - Root wrapper with `lang` attribute\n- `Head` - Meta elements, styles, fonts\n- `Body` - Main content wrapper\n- `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email.\n- `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`.\n- `Row` & `Column` - Multi-column layouts\n- `Tailwind` - Enables Tailwind CSS utility classes\n\n**Content:**\n- `Preview` - Inbox preview text, always first inside ``\n- `Heading` - h1-h6 headings\n- `Text` - Paragraphs\n- `Button` - Styled link buttons (always include `box-border`)\n- `Link` - Hyperlinks\n- `Img` - Images (see Static Files section below)\n- `Hr` - Horizontal dividers\n\n**Specialized:**\n- `CodeBlock` - Syntax-highlighted code\n- `CodeInline` - Inline code\n- `Markdown` - Render markdown\n- `Font` - Custom web fonts\n\n## Before Writing Code\n\nWhen a user requests an email template, ask clarifying questions FIRST if they haven't provided:\n\n1. **Brand colors** - Ask for primary brand color (hex code like #007bff)\n2. **Logo** - Ask if they have a logo file and its format (PNG/JPG only - warn if SVG/WEBP)\n3. **Style preference** - Professional, casual, or minimal tone\n4. **Production URL** - Where will static assets be hosted in production?\n\n## Static Files and Images\n\n### Directory Structure\n\nLocal images must be placed in the `static` folder inside your emails directory:\n\n```\nproject/\n├── emails/\n│ ├── welcome.tsx\n│ └── static/ <-- Images go here\n│ └── logo.png\n```\n\n### Dev vs Production URLs\n\nUse this pattern for images that work in both dev preview and production:\n\n```tsx\nconst baseURL = process.env.NODE_ENV === \"production\"\n ? \"https://cdn.example.com\" // User's production CDN\n : \"\";\n\nexport default function Email() {\n return (\n \n );\n}\n```\n\n**How it works:**\n- **Development:** `baseURL` is empty, so URL is `/static/logo.png` - served by React Email's dev server\n- **Production:** `baseURL` is the CDN domain, so URL is `https://cdn.example.com/static/logo.png`\n\n**Important:** Always ask the user for their production hosting URL. Do not hardcode `localhost:3000`.\n\n## Styling\n\nSee [references/STYLING.md](references/STYLING.md) for comprehensive styling documentation including typography, layout patterns, dark mode, and brand consistency.\n\n### Key Rules\n\n- Use `Tailwind` with `pixelBasedPreset` (email clients don't support `rem`). Import `pixelBasedPreset` from `react-email`.\n- Never use flexbox or grid — use `Row`/`Column` components or tables for layouts.\n- Avoid CSS/Tailwind media queries (`sm:`, `md:`, `lg:`, `xl:`) — limited email client support.\n- Never use theme selectors (`dark:`, `light:`) — not supported.\n- Never use SVG or WEBP images — warn users about rendering issues.\n- Always specify border type (`border-solid`, `border-dashed`, etc.) — email clients don't inherit it.\n- For single-side borders, reset others first (`border-none border-l border-solid`).\n\n### Required Classes\n\n| Component | Required Class | Why |\n|-----------|---------------|-----|\n| `Button` | `box-border` | Prevents padding from overflowing the button width |\n| `Hr` / any border | `border-solid` (or `border-dashed`, etc.) | Email clients don't inherit border type |\n| Single-side borders | `border-none` + the side | Resets default borders on other sides |\n\n### Structure Notes\n- Always define ` ` inside `