patternjavascriptReactModerate

React Email: building email templates with React components

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

react emailemail componentsemail reactreact email renderemail template react

Problem

Email templates in large applications become hard to maintain as plain HTML or MJML files. There is no component reuse, no TypeScript, no hot reload during development, and no integration with your React design system.

Solution

Use React Email (react.email) to build email templates as React components using email-safe primitives (<Html>, <Body>, <Section>, <Button>, etc.). Render to HTML server-side using the render() function from @react-email/render. Includes a dev server with live preview.

Why

React Email brings component composition, TypeScript, and the full React ecosystem to email development. It outputs inlined, email-client-compatible HTML. Development is dramatically faster with the live preview server.

Gotchas

React Email components render to static HTML — React hooks and state have no effect in the output
Use @react-email/render on the server, never in the browser, to generate the final HTML string
Tailwind CSS is supported via @react-email/tailwind but only a subset of utilities — test thoroughly
Components must use inline styles or the provided style props — external CSS files are not supported in most email clients

Code Snippets

React Email component and render to HTML

// emails/WelcomeEmail.tsx
import { Html, Body, Section, Text, Button } from '@react-email/components';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Body style={{ fontFamily: 'sans-serif', backgroundColor: '#f9f9f9' }}>
        <Section style={{ maxWidth: '600px', margin: '0 auto', padding: '24px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>Hi {name}!</Text>
          <Text>Welcome to our platform. We are glad to have you.</Text>
          <Button href="https://example.com/start" style={{ backgroundColor: '#3b82f6', color: '#fff', padding: '12px 24px' }}>
            Get Started
          </Button>
        </Section>
      </Body>
    </Html>
  );
}

// server route
import { render } from '@react-email/render';
import { WelcomeEmail } from './emails/WelcomeEmail';

const html = await render(<WelcomeEmail name="Alice" />);
await sendEmail({ to: 'alice@example.com', subject: 'Welcome!', html });

Context

React/Next.js applications building and sending transactional emails with reusable components

Revisions (0)

No revisions yet.