# React Email > Úsalo al construir plantillas de email en HTML con componentes de React, añadir el editor visual de React Email, renderizar emails a HTML o enviarlos con Resend. Fuente: https://skillsagentes.com/skills/resend/resend-skills/react-email Markdown: https://skillsagentes.com/skills/resend/resend-skills/react-email.md Repositorio: https://github.com/resend/resend-skills Autor: resend Licencia: MIT Actualizado: hace 2 meses Coste de contexto: 89 tok instalada, 3.6k tok al activarse, 21.7k tok con todos los archivos del bundle Bundle: 7 archivos, 85 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add resend/resend-skills --skill react-email --agent claude-code # Cursor npx -y skills add resend/resend-skills --skill react-email --agent cursor # Codex npx -y skills add resend/resend-skills --skill react-email --agent codex # Gemini CLI npx -y skills add resend/resend-skills --skill react-email --agent gemini # Windsurf npx -y skills add resend/resend-skills --skill react-email --agent windsurf # Cline npx -y skills add resend/resend-skills --skill react-email --agent cline ``` ## Qué hace - Construye plantillas de email en HTML con componentes de React - Renderiza las plantillas a HTML y las envía con Resend - Integra el editor visual embebible de React Email en una aplicación - Cubre componentes esenciales, estilos, archivos estáticos e internacionalización - Trae patrones habituales: bienvenida, restablecer contraseña, notificaciones, confirmaciones de pedido y newsletters ## Cuándo usarla - Construir plantillas de email en HTML con componentes de React - Añadir un editor visual de email a una aplicación - Renderizar emails a HTML o enviarlos con Resend ## Qué la activa - "Hazme una plantilla de email de bienvenida con React Email" - "Renderiza esta plantilla a HTML" - "Añade el editor visual de emails a mi app" - "Necesito un email de confirmación de pedido" ## Antes de instalar - Necesita en el PATH: npm, npx - Variables de entorno: RESEND_API_KEY - makes network requests - needs API credentials ## Archivos - SKILL.md — 14 KB - references/COMPONENTS.md — 12 KB - references/EDITOR.md — 11 KB - references/I18N.md — 14 KB - references/PATTERNS.md — 22 KB - references/SENDING.md — 4 KB - references/STYLING.md — 8 KB ## SKILL.md Reproducido tal cual desde resend/resend-skills bajo MIT. Esta sección es el documento original y está en inglés. # 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.json`: ```json { "scripts": { "email": "email dev --dir emails --port 3000" } } ``` Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX. ## Basic Email Template Create an email component with proper structure using the Tailwind component for styling: ```tsx import { Html, Head, Preview, Body, Container, Heading, Text, Button, Tailwind, pixelBasedPreset } from 'react-email'; interface WelcomeEmailProps { name: string; verificationUrl: string; } export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) { return ( Welcome - Verify your email Welcome! Hi {name}, thanks for signing up! ); } // Preview props for testing WelcomeEmail.PreviewProps = { name: 'John Doe', verificationUrl: 'https://example.com/verify/abc123' } satisfies WelcomeEmailProps; export { WelcomeEmail }; ``` ## Behavioral Guidelines - When iterating over the code, only update what the user asked for. Keep the rest intact. - If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach. - 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: ```typescript const EmailTemplate = (props) => { return (

Hello, {props.variableName}!

); } EmailTemplate.PreviewProps = { variableName: "{{variableName}}", }; export default EmailTemplate; ``` - Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid. ## Essential Components See [references/COMPONENTS.md](references/COMPONENTS.md) for complete component documentation. **Core Structure:** - `Html` - Root wrapper with `lang` attribute - `Head` - Meta elements, styles, fonts - `Body` - Main content wrapper - `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email. - `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`. - `Row` & `Column` - Multi-column layouts - `Tailwind` - Enables Tailwind CSS utility classes **Content:** - `Preview` - Inbox preview text, always first inside `` - `Heading` - h1-h6 headings - `Text` - Paragraphs - `Button` - Styled link buttons (always include `box-border`) - `Link` - Hyperlinks - `Img` - Images (see Static Files section below) - `Hr` - Horizontal dividers **Specialized:** - `CodeBlock` - Syntax-highlighted code - `CodeInline` - Inline code - `Markdown` - Render markdown - `Font` - Custom web fonts ## Before Writing Code When a user requests an email template, ask clarifying questions FIRST if they haven't provided: 1. **Brand colors** - Ask for primary brand color (hex code like #007bff) 2. **Logo** - Ask if they have a logo file and its format (PNG/JPG only - warn if SVG/WEBP) 3. **Style preference** - Professional, casual, or minimal tone 4. **Production URL** - Where will static assets be hosted in production? ## Static Files and Images ### Directory Structure Local images must be placed in the `static` folder inside your emails directory: ``` project/ ├── emails/ │ ├── welcome.tsx │ └── static/ <-- Images go here │ └── logo.png ``` ### Dev vs Production URLs Use this pattern for images that work in both dev preview and production: ```tsx const baseURL = process.env.NODE_ENV === "production" ? "https://cdn.example.com" // User's production CDN : ""; export default function Email() { return ( Logo ); } ``` **How it works:** - **Development:** `baseURL` is empty, so URL is `/static/logo.png` - served by React Email's dev server - **Production:** `baseURL` is the CDN domain, so URL is `https://cdn.example.com/static/logo.png` **Important:** Always ask the user for their production hosting URL. Do not hardcode `localhost:3000`. ## Styling See [references/STYLING.md](references/STYLING.md) for comprehensive styling documentation including typography, layout patterns, dark mode, and brand consistency. ### Key Rules - Use `Tailwind` with `pixelBasedPreset` (email clients don't support `rem`). Import `pixelBasedPreset` from `react-email`. - Never use flexbox or grid — use `Row`/`Column` components or tables for layouts. - Avoid CSS/Tailwind media queries (`sm:`, `md:`, `lg:`, `xl:`) — limited email client support. - Never use theme selectors (`dark:`, `light:`) — not supported. - Never use SVG or WEBP images — warn users about rendering issues. - Always specify border type (`border-solid`, `border-dashed`, etc.) — email clients don't inherit it. - For single-side borders, reset others first (`border-none border-l border-solid`). ### Required Classes | Component | Required Class | Why | |-----------|---------------|-----| | `Button` | `box-border` | Prevents padding from overflowing the button width | | `Hr` / any border | `border-solid` (or `border-dashed`, etc.) | Email clients don't inherit border type | | Single-side borders | `border-none` + the side | Resets default borders on other sides | ### Structure Notes - Always define `` inside `` when using Tailwind CSS - `` should always be the first element inside `` - Only include props in `PreviewProps` that the component actually uses - Use fixed width/height for known-size elements (logos, icons); responsive sizing (`w-full`, `h-auto`) for content images ## Rendering ### Convert to HTML ```tsx import { render } from 'react-email'; import { WelcomeEmail } from './emails/welcome'; const html = await render( ); ``` ### Convert to Plain Text ```tsx const text = await render(, { plainText: true }); ``` ## Sending React Email supports sending with any email service provider. See [references/SENDING.md](references/SENDING.md) for complete sending documentation including Resend, Nodemailer, and SendGrid examples. Quick example using the Resend SDK: ```tsx import { Resend } from 'resend'; import { WelcomeEmail } from './emails/welcome'; const resend = new Resend(process.env.RESEND_API_KEY); const { data, error } = await resend.emails.send({ from: 'Acme ', to: ['user@example.com'], subject: 'Welcome to Acme', react: }); ``` The Resend Node SDK automatically handles both HTML and plain-text rendering. ## CLI Commands The `react-email` package provides a CLI accessible via the `email` command: | Command | Description | |---------|-------------| | `email dev --dir --port ` | Start the preview development server (default: `./emails`, port 3000) | | `email build --dir ` | Build the preview app for production deployment | | `email start` | Run the built preview app | | `email export --outDir --pretty --plainText --dir ` | Export templates to static HTML files | | `email resend setup` | Connect the CLI to your Resend account via API key | | `email resend reset` | Remove the stored Resend API key | ## Internationalization See [references/I18N.md](references/I18N.md) for complete i18n documentation. React Email supports three libraries: next-intl, react-i18next, and react-intl. ## Email Editor React Email includes a visual editor (`@react-email/editor`) that can be embedded in your app. It's built on TipTap/ProseMirror and produces email-ready HTML. See [references/EDITOR.md](references/EDITOR.md) for complete documentation including: - `EmailEditor` — batteries-included component with bubble menus, slash commands, and theming - `StarterKit` — 35+ email-aware extensions (headings, lists, tables, columns, buttons, etc.) - `Inspector` — contextual sidebar for editing styles - `EmailTheming` — built-in themes (`basic`, `minimal`) with customizable CSS properties - `composeReactEmail` — export editor content to email-ready HTML and plain text - Custom extensions via `EmailNode` and `EmailMark` Quick example: ```tsx import { EmailEditor, type EmailEditorRef } from '@react-email/editor'; import '@react-email/editor/themes/default.css'; import { useRef } from 'react'; export function MyEditor() { const ref = useRef(null); return ( ); } ``` ## Common Patterns See [references/PATTERNS.md](references/PATTERNS.md) for complete examples including: - Password reset emails - Order confirmations with product lists - Notification emails with code blocks - Multi-column layouts - Team invitation emails ## Email Best Practices 1. **Test across email clients** - Gmail, Outlook, Apple Mail, Yahoo Mail 2. **Keep it responsive** - Max-width around 600px, test on mobile 3. **Use absolute image URLs** - Host on reliable CDN 4. **Write meaningful alt text** - Describe purpose and details for content images; use `alt=""` for decorative images (spacers, dividers, background flourishes). React Email's `` defaults to `alt=""`. 5. **Provide plain text version** - Required for accessibility 6. **Keep file size under 102KB** - Gmail clips larger emails 7. **Add proper TypeScript types** - Define interfaces for all email props 8. **Include preview props** - Add `.PreviewProps` for development testing 9. **Use verified domains** - For production `from` addresses ### Accessibility React Email handles the structural defaults; the rest is content. **What React Email gives you for free:** - `` sets `lang` and `dir` (defaults: `lang="en" dir="ltr"` — override per locale) - `` defaults to `alt=""` so decorative images are skipped by screen readers - `` renders layout tables with `role="presentation"` - `` also emits a `` tag Upgrade with `npm install react-email@latest` to get these defaults. **What you still have to do (content choices):** - Open with a single `<Heading as="h1">`, nest subheadings in order, never skip levels (very short SMS-style emails may skip the heading entirely) - Set descriptive `alt` on meaningful images; pass an explicit `alt=""` on decorative images — never omit the attribute - **Linked images are never decorative.** When an `<Img>` is inside a `<Link>` or `<Button>`, the `alt` must describe where the link goes — `alt=""` on a linked image leaves the link with no accessible name - Write link text that describes the destination (`<Button>Read the report</Button>`, not `click here`) - Hit 4.5:1 text contrast (WCAG AA); preview in dark mode - For layout tables you build by hand (outside `<Markdown>`), add `role="presentation"` - For non-English emails, pass the locale: `<Html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>` (see [I18N.md](references/I18N.md)) For the full rule set, severity ranking, and authoring checklist, see the [accessibility reference](https://github.com/resend/email-best-practices/blob/main/references/accessibility.md) in the `email-best-practices` skill. ## Additional Resources - [React Email Documentation](https://react.email/docs/llms.txt) - [React Email GitHub](https://github.com/resend/react-email) - [Resend Documentation](https://resend.com/docs/llms.txt) - [Email Client CSS Support](https://www.caniemail.com) - Component Reference: [references/COMPONENTS.md](references/COMPONENTS.md) - Styling Guide: [references/STYLING.md](references/STYLING.md) - Email Editor: [references/EDITOR.md](references/EDITOR.md) - Sending Guide: [references/SENDING.md](references/SENDING.md) - Internationalization Guide: [references/I18N.md](references/I18N.md) - Common Patterns: [references/PATTERNS.md](references/PATTERNS.md) ## Dónde encaja - Categoría: [Redacción y contenido](https://skillsagentes.com/categorias/redaccion-contenido.md) — Redacción, edición y estructuración de contenido extenso. - Creador: [resend](https://skillsagentes.com/creators/resend.md) — 5 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Resend Cli](https://skillsagentes.com/skills/resend/resend-skills/resend-cli.md): Opera la plataforma Resend desde la terminal: envía emails (incluidas plantillas React Email con --react-email) y gestiona dominios, contactos, broadcasts, plantillas, webhooks, claves, logs y eventos. - [Resend](https://skillsagentes.com/skills/resend/resend-skills/resend.md): Úsalo al trabajar con la API de email de Resend: envío transaccional individual o por lotes, recepción por webhook, plantillas, eventos de entrega, dominios, contactos, broadcasts y claves de API. - [Agent Email Inbox](https://skillsagentes.com/skills/resend/resend-skills/agent-email-inbox.md): Úsalo al construir cualquier sistema donde el email dispara acciones: bandejas de agente, soporte automático o email a tarea. Trae los patrones de seguridad para tratar correo no confiable. - [Email Best Practices](https://skillsagentes.com/skills/resend/resend-skills/email-best-practices.md): Úsalo al construir funciones de email, cuando los correos van a spam, con muchos rebotes, al configurar SPF/DKIM/DMARC, para cumplimiento (CAN-SPAM, GDPR, CASL) o para hacer los emails accesibles. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)