React Email

Compose beautiful emails using React components and send them via MailsSetu.

Next steps

Keep your component rendering flexible for real product data.

Server-side rendering is the safest way to send React Email output.

Installation

bash

npm install @react-email/components @react-email/render react react-dom mailsetu
# or: pnpm add @react-email/components @react-email/render react react-dom mailsetu

Create an email component

React Email lets you build emails as React components. Create a file in emails/:

tsx

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

interface WelcomeEmailProps {
  name: string
  ctaUrl: string
}

export function WelcomeEmail({ name, ctaUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', background: '#f6f9fc' }}>
        <Container style={{ maxWidth: '600px', margin: '40px auto', background: '#fff', padding: '32px', borderRadius: '8px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>Welcome, {name}!</Text>
          <Text style={{ color: '#555' }}>Thanks for signing up. Click below to get started.</Text>
          <Button href={ctaUrl} style={{ background: '#0ea5e9', color: '#fff', borderRadius: '6px', padding: '12px 24px' }}>
            Get started
          </Button>
        </Container>
      </Body>
    </Html>
  )
}

Render and send

Use the safe server-side helper from `mailsetu/react` to render and send in one step:

typescript

import MailSetu from 'mailsetu'
import { sendReactEmail } from 'mailsetu/react'
import { WelcomeEmail } from './emails/WelcomeEmail'

const client = new MailSetu(process.env.MAILSETU_API_KEY!)

const result = await sendReactEmail(client, {
  from: 'welcome@yourdomain.com',
  to: ['priya@example.com'],
  subject: 'Welcome to our app!',
  react: <WelcomeEmail name="Priya" ctaUrl="https://yourapp.com/start" />,
})

console.log(result.id)

Preview locally

React Email includes a dev server to preview your emails in the browser:

bash

npx react-email dev

# Opens your local preview server — preview all emails in /emails folder

Spring Boot

.NET / C#