Email Templates

Usage

pnpmnpmyarnbun
pnpm add '@kit/email-templates@workspace:*'
Copy

Copy to Clipboardimport { renderWelcomeEmail } from '@kit/email-templates';
 
const { html, subject } = await renderWelcomeEmail({
    appConfig: appConfig,
    name: 'John Doe',
});

Supabase templates

As said in the supabase documentation, supabase use the following templates for authentication.

Email structure

All email templates follow a common structure:

• Header component at the top of each email, containing the application logo and branding
• Footer component at the bottom of each email, containing legal information and unsubscribe links

This consistent structure ensures a professional appearance across all your email communications.

Tailwind configuration

Located in the kit/email/email-templates/tailwind.email.config.ts file.

TailwindConfig

Font configuration

Located in the kit/email/email-templates/tailwind.email.config.ts file.

The config font object allows you to load fonts to use in your emails.

FontConfig

Email templates

Welcome Email

Used to welcome new users to your application. Use renderWelcomeEmail to render this template.

WelcomeEmailProps

Confirm Email Address

Used to verify a user's email address during registration. Use renderConfirmEmailAddressEmail to render this template.

ConfirmEmailAddressEmailProps

Invite User

Used to invite users to join an organization. Use renderInviteUserEmail to render this template.

InviteUserEmailProps

Password Reset Email

Used to send password reset links to users. Use renderResetPasswordEmail to render this template.

ResetPasswordEmailProps

Confirm Changed Email Address

Used to confirm when a user wants to change their email address. Use renderConfirmChangeEmailAddressEmail to render this template.

ConfirmChangeEmailAddressEmailProps

Revoked Invitation Email

Used to notify users when their invitation to an organization has been revoked. Use renderRevokedInvitationEmail to render this template.

RevokedInvitationEmailProps

User Delete Email

Used to confirm user account deletion requests. Use renderUserDeleteEmail to render this template.

UserDeleteEmailProps