Emails

StarterKitPro uses Resend by default for sending various emails, including:

Magic Links (Authentication)
Transactional Emails
Marketing Emails

Email Design (React Email)

Emails are built using React Email and Tailwind CSS:

Design: Use React components and Tailwind.
Templates: Located in components/mails/.
Output: Automatically converted to email-safe HTML/CSS.

Here are some useful resources from React Email:

Sending Emails

Sending custom emails is straightforward using the centralized function in lib/resend.ts. This renders your React Email template and sends it via the configured provider (Resend by default).

React Email

Here sending the email which is design with designed with react email components which provides proer react support and tailwind.

Example 1

import { sendEmail, renderEmail } from "@/lib/resend";
import { WelcomeUserEmail } from "@/components/mails/welcome-user-email";
 
// it converts tailwind desiged email to email-safe HTML/CSS
const emailContent = await renderEmail(WelcomeUserEmail, {
  name: "Hasan Afzal",
  email: "example@domain.com",
  websiteUrl: `https://${appConfig.domainName}`,
});
 
await sendEmail({
  to: "example@domain.com",
  subject: "Welcome to StarterKit Pro",
  html: emailContent,
});

Custom Email

Here sending the totaly custom email which is not using react email just using html/css.

Example 2

import { sendEmail } from "@/lib/resend";
 
const emailContent = `
  <html>
    <head>
      <title>Welcome to StarterKit Pro</title>
    </head>
    <body>
      <h1 style="font-size: 1.5rem; font-weight: bold; color: #1f2937; margin: 1.5rem 0;">
        Hi Hasan Afzal,
      </h1>
 
      <p style="font-size: 1rem; color: #4b5563; margin: 1rem 0;">
        Thanks for signing up for StarterKit Pro! We're excited to have you on board.
      </p>
 
      <p style="font-size: 1rem; color: #4b5563; margin: 1rem 0;">
        Your account has been created with the email: 
        <span style="font-weight: 600;">example@domain.com</span>
      </p>
 
      <p style="font-size: 1rem; color: #4b5563; margin: 1rem 0;">
        We're here to help you get the most out of our platform. Here's what you can do next:
      </p>
 
      <div style="text-align: center; margin: 2rem 0;">
        <a href="https://starterkitpro.com" 
           style="background-color: #2563eb; 
                  color: white; 
                  padding: 0.75rem 1.5rem; 
                  border-radius: 0.375rem; 
                  font-weight: 500; 
                  text-decoration: none; 
                  display: inline-block;">
          Visit Website
        </a>
      </div>
 
      <p style="font-size: 1rem; color: #4b5563; margin: 1rem 0;">
        If you have any questions or need help getting started, just reply to this email. 
        Our team is always ready to assist you.
      </p>
 
      <p style="font-size: 1rem; color: #4b5563; margin: 1rem 0;">
        Best regards,<br>
        The StarterKit Pro Team
      </p>
 
    </body>
  </html>
`;
 
await sendEmail({
  to: "example@domain.com",
  subject: "Welcome to StarterKit Pro",
  html: emailContent,
});

Magic Links

The magic link authentication system also uses the configured email provider (Resend).

Provider Configuration & Switching

Configuring your domain with the email provider is crucial.

Resend Config: See details
SendGrid Config: See details

Quick Provider Change

Switching between Resend and SendGrid (or other providers with similar setup) can typically be done quickly by updating the relevant configuration and environment variables. For details check the related feature doc.