Softgen templates

Softgen templates feature a clean, modern design optimized for AI and SaaS platforms. These emails prioritize clarity and user activation with minimal friction.

Template overview

The Softgen template collection includes:

Welcome email: Simple activation email for new users
Payment confirmation: Professional receipt with plan details
Payment package email: Confirm add-on package purchases with credited resources
Token purchase email: Credit confirmation for token/credit purchases
Team invitation email: Invite collaborators to join projects

Welcome email

A streamlined welcome email that quickly orients new users and provides a clear path to getting started.

Key features

Dual-mode logo (light and dark versions)
Concise value proposition
Single, prominent CTA button
Minimal distractions
Company attribution in footer
Bordered button design

Use cases

Welcome users to AI platforms
Onboard SaaS product users
Activate new trial accounts
Drive users to dashboard
Create simple, fast onboarding

Code

softgen/1-welcome-email.tsx

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

export default function SoftgenWelcomeEmail() {
  return (
    <Html>
      <Head />
      <Preview>
        Welcome to Softgen - Your AI Web App Developer. Build web apps without coding.
      </Preview>
      <Tailwind
        config={{
          darkMode: "class",
          theme: {
            extend: {
              colors: {
                brand: "#0a0a0a",
                muted: "#fafafa",
              },
            },
          },
        }}
      >
        <Body className="font-sans">
          <Container className="mx-auto px-4 py-5">
            <Section className="mt-8">
              <Link href="https://softgen.ai">
                <Img
                  src="https://res.cloudinary.com/sutharjay/image/upload/v1740686249/me/projects/reactui-email/logo/softgen-light.svg"
                  width="50"
                  height="50"
                  alt="Softgen Logo Light"
                  className="hidden dark:block"
                />
                <Img
                  src="https://res.cloudinary.com/sutharjay/image/upload/v1740686249/me/projects/reactui-email/logo/softgen-dark.svg"
                  width="50"
                  height="50"
                  alt="Softgen Logo Dark"
                  className="block dark:hidden"
                />
              </Link>
            </Section>

            <Section className="mt-8">
              <Text className="text-xl font-bold leading-tight">Welcome to Softgen!</Text>
            </Section>

            <Section className="mt-2">
              <Text className="text-base">Hey there 👋,</Text>
              <Text className="text-base">
                Thanks for joining Softgen! We're excited to help you transform your ideas into
                reality. Softgen is your{" "}
                <span className="text-base font-bold">AI Web App Developer</span>. Simply describe
                your vision, give instructions, and build full-stack web apps - no coding required.
              </Text>
            </Section>

            <Section className="mt-4 text-center">
              <table
                style={{
                  border: "1px solid rgb(39 39 42 / 0.2)",
                  borderRadius: "8px",
                  borderCollapse: "collapse",
                  display: "flex",
                  justifyContent: "center",
                  width: "fit-content",
                  alignItems: "center",
                }}
              >
                <tr>
                  <td>
                    <Button
                      className="mx-auto flex w-fit items-center justify-center rounded-[8px] bg-white px-[24px] py-[12px] text-center text-[14px] font-semibold text-zinc-900"
                      href="https://softgen.ai/dashboard"
                    >
                      Start Building Your App →
                    </Button>
                  </td>
                </tr>
              </table>
            </Section>

            <Hr className="mb-6 mt-8 border-gray-200" />

            <Section className="text-left text-sm text-primary/80">
              <Text className="m-0 p-0 font-medium">From,</Text>
              <Text className="m-0 p-0 font-bold">Team Softgen</Text>
              <Text className="m-0 p-0">Softgen – a Kortix AI Corp Product</Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Dark mode logo handling

The template includes both light and dark logo versions:

<Img
  src="logo-light.svg"
  alt="Logo"
  className="hidden dark:block"  // Show only in dark mode
/>
<Img
  src="logo-dark.svg"
  alt="Logo"
  className="block dark:hidden"  // Show only in light mode
/>

This ensures your logo is always visible regardless of the user’s email client theme.

Many email clients now support dark mode. Providing both logo versions creates a professional appearance in all contexts.

Customization options

Value proposition

Highlight your product’s unique value:

<Text className="text-base">
  Softgen is your <span className="font-bold">AI Web App Developer</span>.
  Simply describe your vision, give instructions, and build full-stack web apps.
</Text>

Use bold spans to emphasize key benefits.

CTA button

The bordered button style for better visibility:

<table style={{
  border: "1px solid rgb(39 39 42 / 0.2)",
  borderRadius: "8px",
  display: "flex",
  justifyContent: "center",
}}>
  <tr>
    <td>
      <Button className="bg-white text-zinc-900">
        Your CTA text →
      </Button>
    </td>
  </tr>
</table>

Payment confirmation email

A professional payment receipt email that confirms successful subscription and guides users to next steps.

Key features

Celebration emoji in heading (“Payment Confirmed! 🎉”)
Plan details table with bordered design
Status indicator with color coding
Clear next steps instruction
Dashboard CTA
Consistent branding

Use cases

Confirm subscription payments
Send payment receipts
Guide users after purchase
Activate paid features
Reduce post-purchase anxiety

Code

softgen/2-payment-email.tsx

export default function SoftgenPaymentSuccessEmail() {
  return (
    <Html>
      <Head />
      <Preview>Payment Confirmed - Welcome to Softgen. Your subscription is now active.</Preview>
      <Tailwind config={{...}}>
        <Body className="font-sans">
          <Container className="mx-auto px-4 py-5">
            <Section className="mt-8">
              <Text className="text-xl font-bold leading-tight">Payment Confirmed! 🎉</Text>
            </Section>

            <Section className="mt-2">
              <Text className="text-base">Hello,</Text>
              <Text className="text-base">
                Your payment for the <span className="font-bold">Pro Plan</span> has been
                successfully processed. Welcome to Softgen, where you can create innovative
                solutions without coding.
              </Text>
            </Section>

            <Section className="mt-4">
              <div style={{
                border: "1px solid rgb(39 39 42 / 0.25)",
                borderRadius: "12px",
                overflow: "hidden",
              }}>
                <table style={{
                  width: "100%",
                  borderCollapse: "collapse",
                }}>
                  <tbody>
                    <tr>
                      <td style={{
                        padding: "16px",
                        borderBottom: "1px solid rgb(39 39 42 / 0.25)",
                        backgroundColor: "rgb(39 39 42 / 0.2)",
                      }}>
                        <Text className="m-0 text-lg font-semibold text-primary">Plan Details</Text>
                      </td>
                    </tr>
                    <tr>
                      <td style={{ padding: "16px" }}>
                        <table style={{ width: "100%" }}>
                          <tbody>
                            <tr>
                              <td style={{ width: "30%", paddingBottom: "8px" }}>
                                <Text className="m-0 text-sm font-medium text-zinc-500">
                                  Plan Type
                                </Text>
                              </td>
                              <td style={{ paddingBottom: "8px" }}>
                                <Text className="m-0 text-sm font-bold">Pro Plan</Text>
                              </td>
                            </tr>
                            <tr>
                              <td style={{ width: "30%" }}>
                                <Text className="m-0 text-sm font-medium text-zinc-500">
                                  Status
                                </Text>
                              </td>
                              <td>
                                <Text className="m-0 text-sm font-bold text-emerald-400">
                                  Active
                                </Text>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </Section>

            <Section className="mt-4">
              <Text className="text-base">
                To get started, please set up your account using the button below. This will allow
                you to access all the features of your plan.
              </Text>
            </Section>

            <Section className="mt-4 text-center">
              <table style={{...}}>
                <tr>
                  <td>
                    <Button
                      className="mx-auto flex w-fit items-center justify-center rounded-[8px] bg-white px-[24px] py-[12px] text-center text-[14px] font-semibold text-zinc-900"
                      href="https://softgen.ai/dashboard"
                    >
                      Go to Dashboard →
                    </Button>
                  </td>
                </tr>
              </table>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Plan details table design

The template uses a nested table structure for the plan details:

<div style={{
  border: "1px solid rgb(39 39 42 / 0.25)",
  borderRadius: "12px",
  overflow: "hidden",
}}>
  <table>
    {/* Header row with background */}
    <tr>
      <td style={{ backgroundColor: "rgb(39 39 42 / 0.2)" }}>
        <Text>Plan Details</Text>
      </td>
    </tr>
    
    {/* Content rows */}
    <tr>
      <td>
        <table>
          <tr>
            <td>Plan Type</td>
            <td>Pro Plan</td>
          </tr>
          <tr>
            <td>Status</td>
            <td className="text-emerald-400">Active</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

This creates a professional receipt-style layout that’s compatible with email clients.

Post-purchase psychology

The email addresses key post-purchase moments:

Immediate confirmation: “Payment Confirmed! 🎉”
Reduce anxiety: Clear status indicator showing “Active”
Next steps: “To get started, please set up your account”
Enable action: Prominent dashboard CTA

The celebration emoji in the subject line and heading creates positive emotional association with the purchase.

Payment package email

A specialized email confirming the purchase of additional resource packages, providing users with clear details about their credited requests.

Key features

Package activation confirmation with emoji
Detailed package information table
Total free requests credited display
Dashboard CTA for immediate access
Professional layout with bordered sections

Use cases

Confirm add-on package purchases
Credit account with additional resources
Provide clear purchase details
Drive users to utilize new capacity

Code

softgen/3-payment-package-email.tsx

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

interface SoftgenPaymentPackageEmailProps {
  packageName?: string;
  totalFreeRequests?: number;
}

export default function SoftgenPaymentPackageEmail({
  packageName = "Pro Package",
  totalFreeRequests = 1000,
}: SoftgenPaymentPackageEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Payment Confirmed - Softgen Package Activated</Preview>
      <Tailwind>
        <Body className="font-sans">
          <Container className="mx-auto px-4 py-5">
            <Section className="mt-8">
              <Link href="https://softgen.ai">
                <Img
                  src="https://res.cloudinary.com/sutharjay/image/upload/v1740686249/me/projects/reactui-email/logo/softgen-light.svg"
                  width="50"
                  height="50"
                  alt="Softgen Logo"
                />
              </Link>
            </Section>

            <Section className="mt-8">
              <Text className="text-xl font-bold">Package Activated! 🎉</Text>
            </Section>

            <Section className="mt-2">
              <Text className="text-base">Hello,</Text>
              <Text className="text-base">
                Your payment for the <span className="font-bold">{packageName}</span> package has
                been successfully processed. Your account has been updated with additional resources
                to support your project development with Softgen.
              </Text>
            </Section>

            <Section className="mt-4">
              <div style={{ border: "1px solid rgb(39 39 42 / 0.25)", borderRadius: "12px" }}>
                <table style={{ width: "100%", borderCollapse: "collapse" }}>
                  <tbody>
                    <tr>
                      <td style={{ padding: "16px", borderBottom: "1px solid rgb(39 39 42 / 0.25)" }}>
                        <Text className="m-0 text-lg font-semibold">Package Details</Text>
                      </td>
                    </tr>
                    <tr>
                      <td style={{ padding: "16px" }}>
                        <table style={{ width: "100%" }}>
                          <tbody>
                            <tr>
                              <td style={{ width: "40%", paddingBottom: "8px" }}>
                                <Text className="m-0 text-sm font-medium text-zinc-500">Package</Text>
                              </td>
                              <td style={{ paddingBottom: "8px" }}>
                                <Text className="m-0 text-sm font-bold">{packageName}</Text>
                              </td>
                            </tr>
                            <tr>
                              <td style={{ width: "40%" }}>
                                <Text className="m-0 text-sm font-medium text-zinc-500">Total Free Requests</Text>
                              </td>
                              <td>
                                <Text className="m-0 text-sm font-bold">{totalFreeRequests}</Text>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </Section>

            <Section className="mt-4 text-center">
              <Button
                className="rounded-[8px] bg-white px-[24px] py-[12px] text-[14px] font-semibold text-zinc-900"
                href="https://softgen.ai/dashboard"
              >
                Go to Dashboard →
              </Button>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Customization

Modify package details

<SoftgenPaymentPackageEmail
  packageName="Enterprise Package"
  totalFreeRequests={10000}
/>

Add expiration date

<Text className="text-sm text-zinc-500">
  Package valid until: December 31, 2024
</Text>

Token purchase email

Confirms token purchases and provides users with details about tokens added to their account for continued development.

Key features

Token purchase confirmation
Package size and tokens added display
Immediate availability notification
Dashboard access CTA
Formatted number display for large token counts

Use cases

Confirm token/credit purchases
Display purchase details clearly
Encourage continued platform usage
Provide immediate access to resources

Code

softgen/4-purchase-token-email.tsx

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

interface SoftgenPurchaseTokenEmailProps {
  packageSize?: string;
  tokensAdded?: number;
}

export default function SoftgenPurchaseTokenEmail({
  packageSize = "Standard Package",
  tokensAdded = 5000,
}: SoftgenPurchaseTokenEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Token Purchase Confirmed - Your Softgen account has been credited</Preview>
      <Tailwind>
        <Body className="font-sans">
          <Container className="mx-auto px-4 py-5">
            <Section className="mt-8">
              <Link href="https://softgen.ai">
                <Img
                  src="https://res.cloudinary.com/sutharjay/image/upload/v1740686249/me/projects/reactui-email/logo/softgen-light.svg"
                  width="50"
                  height="50"
                  alt="Softgen Logo"
                />
              </Link>
            </Section>

            <Section className="mt-8">
              <Text className="text-xl font-bold">Token Purchase Confirmed! 🎉</Text>
            </Section>

            <Section className="mt-2">
              <Text className="text-base">Hello,</Text>
              <Text className="text-base">
                Your token purchase has been successfully processed. Your account has been credited
                with additional tokens to support your development needs with Softgen.
              </Text>
            </Section>

            <Section className="mt-4">
              <div style={{ border: "1px solid rgb(39 39 42 / 0.25)", borderRadius: "12px" }}>
                <table style={{ width: "100%", borderCollapse: "collapse" }}>
                  <tbody>
                    <tr>
                      <td style={{ padding: "16px", borderBottom: "1px solid rgb(39 39 42 / 0.25)" }}>
                        <Text className="m-0 text-lg font-semibold">Purchase Details</Text>
                      </td>
                    </tr>
                    <tr>
                      <td style={{ padding: "16px" }}>
                        <table style={{ width: "100%" }}>
                          <tbody>
                            <tr>
                              <td style={{ width: "40%", paddingBottom: "8px" }}>
                                <Text className="m-0 text-sm font-medium text-zinc-500">Package Size</Text>
                              </td>
                              <td style={{ paddingBottom: "8px" }}>
                                <Text className="m-0 text-sm font-bold">{packageSize}</Text>
                              </td>
                            </tr>
                            <tr>
                              <td style={{ width: "40%" }}>
                                <Text className="m-0 text-sm font-medium text-zinc-500">Tokens Added</Text>
                              </td>
                              <td>
                                <Text className="m-0 text-sm font-bold">
                                  {tokensAdded.toLocaleString()}
                                </Text>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </Section>

            <Section className="mt-4 text-center">
              <Button
                className="rounded-[8px] bg-white px-[24px] py-[12px] text-[14px] font-semibold text-zinc-900"
                href="https://softgen.ai/dashboard"
              >
                Go to Dashboard →
              </Button>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Customization

Modify token amounts

<SoftgenPurchaseTokenEmail
  packageSize="Premium Package"
  tokensAdded={25000}
/>

Team invitation email

Invites users to collaborate on projects, providing a clear path for new and existing users to join team workspaces.

Key features

Clear invitation message with inviter details
Project name prominently displayed
Primary CTA for existing users
Secondary registration link for new users
Onboarding instructions for new users
Minimal, focused design

Use cases

Invite team members to projects
Onboard collaborators
Share workspace access
Convert invitations to registrations

Code

softgen/5-team-invitation-email.tsx

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

interface SoftgenTeamInvitationEmailProps {
  inviterEmail?: string;
  projectName?: string;
}

export default function SoftgenTeamInvitationEmail({
  inviterEmail = "inviter@example.com",
  projectName = "My Awesome Project",
}: SoftgenTeamInvitationEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Invitation to Collaborate on Softgen Project</Preview>
      <Tailwind>
        <Body className="font-sans">
          <Container className="mx-auto px-4 py-5">
            <Section className="mt-8">
              <Link href="https://softgen.ai">
                <Img
                  src="https://res.cloudinary.com/sutharjay/image/upload/v1740686249/me/projects/reactui-email/logo/softgen-light.svg"
                  width="50"
                  height="50"
                  alt="Softgen Logo"
                />
              </Link>
            </Section>

            <Section className="mt-8">
              <Text className="text-xl font-bold">Project Invitation</Text>
            </Section>

            <Section className="mt-2">
              <Text className="text-base">Hello,</Text>
              <Text className="text-base">
                <span className="font-bold">{inviterEmail}</span> has invited you to collaborate on
                the project <span className="font-bold">{projectName}</span> on Softgen.
              </Text>
            </Section>

            <Section className="mt-4 text-center">
              <Button
                className="rounded-[8px] bg-white px-[24px] py-[12px] text-[14px] font-semibold text-zinc-900"
                href="https://softgen.ai/dashboard"
              >
                Access Project →
              </Button>
            </Section>

            <Section className="mt-4">
              <Text className="text-base">
                New to Softgen?{" "}
                <Link href="https://softgen.ai" className="text-primary underline">
                  Register here
                </Link>{" "}
                to get started.
              </Text>
              <Text className="mt-2 text-base">
                Once signed up, come back to this email and click on the{" "}
                <span className="font-semibold">Access Project</span> button to join the
                collaboration.
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Customization

Customize invitation details

<SoftgenTeamInvitationEmail
  inviterEmail="john@company.com"
  projectName="E-commerce Platform"
/>

Add role information

<Text className="text-base">
  You've been invited as a <span className="font-bold">Developer</span>
</Text>

Design system

Colors
Tables
Status indicators

{
  brand: "#0a0a0a",       // Near black
  muted: "#fafafa",       // Light gray
  emerald: "#34d399",     // Success green for status
}

<Text className="text-emerald-400">Active</Text>
<Text className="text-red-400">Inactive</Text>
<Text className="text-yellow-400">Pending</Text>

Email sequence

Softgen demonstrates a comprehensive transactional email strategy:

Welcome: Immediate after signup
Payment confirmation: After successful subscription payment
Payment package: When users purchase add-on resource packages
Token purchase: When users buy additional tokens/credits
Team invitation: When users invite collaborators to projects

Minimalist approach benefits

Reduced overwhelm: Fewer emails mean each one matters
Clear purpose: Each email has single, focused goal
Higher engagement: Users more likely to act on fewer emails
Better deliverability: Lower volume reduces spam risk

Supabase templates

Developer-focused emails with minimal design

Dub templates

SaaS platform emails with clean, modern aesthetic

Get Started

Templates

Components

Guides

Template overview

Welcome email

Key features

Use cases

Code

Dark mode logo handling

Customization options

Payment confirmation email

Key features

Use cases

Code

Plan details table design

Post-purchase psychology

Payment package email

Key features

Use cases

Code

Customization

Token purchase email

Key features

Use cases

Code

Customization

Team invitation email

Key features

Use cases

Code

Customization

Design system

Email sequence

Minimalist approach benefits

Supabase templates

Dub templates

Build docs developers (and LLMs) love

Get Started

Templates

Components

Guides

​Template overview

​Welcome email

​Key features

​Use cases

​Code

​Dark mode logo handling

​Customization options

​Payment confirmation email

​Key features

​Use cases

​Code

​Plan details table design

​Post-purchase psychology

​Payment package email

​Key features

​Use cases

​Code

​Customization

​Token purchase email

​Key features

​Use cases

​Code

​Customization

​Team invitation email

​Key features

​Use cases

​Code

​Customization

​Design system

​Email sequence

​Minimalist approach benefits

​Related templates

Supabase templates

Dub templates

Build docs developers (and LLMs) love

Template overview

Welcome email

Key features

Use cases

Code

Dark mode logo handling

Customization options

Payment confirmation email

Key features

Use cases

Code

Plan details table design

Post-purchase psychology

Payment package email

Key features

Use cases

Code

Customization

Token purchase email

Key features

Use cases

Code

Customization

Team invitation email

Key features

Use cases

Code

Customization

Design system

Email sequence

Minimalist approach benefits

Related templates