React Email

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

Installation

bash

npm install @react-email/components react react-dom mailsetu
# or: pnpm add @react-email/components 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 render() from @react-email/render to convert your component to HTML, then send via MailSetu:

typescript

import { render } from '@react-email/render'
import MailSetu from 'mailsetu'
import { WelcomeEmail } from './emails/WelcomeEmail'

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

const html = render(<WelcomeEmail name="Priya" ctaUrl="https://yourapp.com/start" />)
const text = render(<WelcomeEmail name="Priya" ctaUrl="https://yourapp.com/start" />, { plainText: true })

const result = await client.emails.send({
  from: 'welcome@yourdomain.com',
  to: ['priya@example.com'],
  subject: 'Welcome to our app!',
  html,
  text,
})

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#