Email Templates

LaunchKit includes a comprehensive set of customizable email templates built with React Email for all your transactional email needs.

Email Templates (`/components/emails`) [CUSTOMIZABLE]

Template Structure

All email templates use React Email components and follow a consistent structure:

import * as React from 'react';
import {
  Body, Container, Head, Heading, Html, Img, Link,
  Preview, Section, Text, Tailwind, Button, Hr
} from '@react-email/components';

interface EmailProps {
  customerName?: string;
  customerEmail?: string;
  // Template-specific props
}

const EmailTemplate = (props: EmailProps) => {
  const { customerName = 'Customer', /* other props */ } = props;

  return (
    <Html>
      <Head />
      <Preview>Email preview text</Preview>
      <Tailwind>
        <Body className="bg-white font-sans">
          <Container className="max-w-2xl mx-auto py-8">
            {/* Email content */}
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

Available Templates

purchase-confirmation.tsx

Order confirmation with details
Download links and next steps
Invoice and receipt information

payment-failed.tsx

Payment decline notification
Retry instructions
Support contact information

invoice-paid.tsx

Recurring payment confirmation
Service continuation notice
Receipt and invoice details

Customizing Email Templates

1. Update Branding:

// Replace logo and colors
<Img
  src="https://yourdomain.com/logo.png"
  width="120"
  height="40"
  alt="Your App Logo"
  className="mb-6"
/>

<Button
  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg"
  href={dashboardUrl}
>
  Access Your Dashboard
</Button>

2. Customize Content:

// Update messaging and tone
<Heading className="text-2xl font-bold text-gray-900 mb-4">
  🎉 Welcome to {appName}!
</Heading>

<Text className="text-gray-600 mb-6">
  Thanks for joining thousands of developers who trust {appName}
  to launch their SaaS applications faster than ever.
</Text>

3. Add Custom Sections:

// Add new content sections
<Section className="bg-gray-50 p-6 rounded-lg mb-6">
  <Heading as="h3" className="text-lg font-semibold mb-3">
    What's Next?
  </Heading>
  <ul className="space-y-2">
    <li>✅ Set up your development environment</li>
    <li>✅ Configure your database</li>
    <li>✅ Deploy to production</li>
  </ul>
</Section>

Email Templates

Email Templates (/components/emails) [CUSTOMIZABLE]

Template Structure

Available Templates

Customizing Email Templates

Email Templates (`/components/emails`) [CUSTOMIZABLE]