Docs
Mail Templates

Mail Templates

Mail Templates

SaaSKits uses React Email to generate HTML emails.

React Email is a a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

By default we provide two kind of templates:

  • Verify Email
  • Reset Password

How to create a new template

To create a new template you need to create a new file in app/components/email folder.

The file name will be the template name.

For example, if you want to create a new template called welcome you need to create a new file called welcome.tsx in app/components/email folder.

app/components/email/welcome.tsx
 
import React from 'react';
 
import {
  Body,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Text,
} from "@react-email/components"
 
import { siteConfig } from "@/lib/brand/config"
 
 
interface WelcomeEmailProps {
  message?: string
}
 
export const WelcomeEmail = ({
  message = "tt226-5398x",
}: WelcomeEmailProps) => (
  <Html>
    <Head />
    <Preview>Welcome to {siteConfig.title}</Preview>
    <Body style={main}>
      <Container style={container}>
        <Heading style={heading}>
            Welcome to {siteConfig.title}
        </Heading>
        <Text>
          {message}
        </Text>
        <Hr style={hr} />
      </Container>
    </Body>
  </Html>
)

How to use a template

If you are not using Resend, you will need to convert the template to HTML before sending it.

import { render } from '@react-email/render';
 
import { WelcomeEmail } from "@/components/email/welcome"
 
 
const html = render(<WelcomeEmail message="My Message" />);

You can find more examples and documentation in React Email.

Email ProviderSEO