FeaturesEmails

Email Templates

Render typed React email templates from @kit/email-templates.

React Email

What It Does

@kit/email-templates provides reusable templates and renderer functions for auth and transactional messages.

When To Use

Sending branded emails with shared layout/header/footer.

Prerequisites

appConfig available for branding fields when needed.

Important

This page describes the standard kit integration path; adapt app-specific paths and config names when your project differs.

How To Use

Render template

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

Supabase templates

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

Template	Description
Confirm signup	Email sent to the user to confirm their signup.
Invite user	Email sent to the user to invite them to the project.
Magic Link	Email sent to the user to sign in to the project.
Change Email Address	Email sent to the user to confirm their email change.
Reset Password	Email sent to the user to reset their password.

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.

In the templates, we use the AppConfig object to get the application logo and branding.

Tailwind configuration

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

TailwindConfig

Prop	Type	Default
`important`	`Partial<ImportantConfig>`
`prefix`	`string`
`separator`	`string`
`safelist`	`SafelistConfig[]`
`blocklist`	`string[]`
`presets`	`Partial<Config>[]`
`future`	`Partial<FutureConfig>`
`experimental`	`Partial<ExperimentalConfig>`
`darkMode`	`Partial<DarkModeConfig>`
`theme`	`Partial<CustomThemeConfig & { extend: Partial<CustomThemeConfig>...`
`corePlugins`	`Partial<CorePluginsConfig>`
`plugins`	`(PluginCreator \| { handler: PluginCreator; config?: Partial<Config>; } \| { (options: any)...`

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

Prop	Type	Default
`fontFamily*`	`string`
`fallbackFontFamily*`	`FallbackFont \|...`
`webFont`	`{ url: string; format:...`
`fontStyle`	`Property.FontStyle`
`fontWeight`	`Property.FontWeight`

Email templates

Welcome Email

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

WelcomeEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`
`name*`	`string`

Confirm Email Address

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

ConfirmEmailAddressEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`
`name*`	`string`
`verificationLink*`	`string`

Invite User

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

InviteUserEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`
`name*`	`string`
`inviteLink*`	`string`

Password Reset Email

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

ResetPasswordEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`
`resetPasswordLink*`	`string`

Confirm Changed Email Address

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

ConfirmChangeEmailAddressEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`
`confirmLink*`	`string`
`newEmail*`	`string`

Revoked Invitation Email

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

RevokedInvitationEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`
`organizationName*`	`string`

User Delete Email

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

UserDeleteEmailProps

Prop	Type	Default
`appConfig*`	`{ description: string;...`

MCP Context

capability: email_template_rendering
entrypoints:
  - kit/email/email-templates/src/index.ts
  - kit/email/email-templates/src/templates/*
inputs:
  - template_name
  - template_props
outputs:
  - html_and_subject
constraints:
  - props must satisfy template-specific types
side_effects:
  - none (render only)

Agent Recipe

Pick template function from package index.
Build typed props payload.
Pass rendered html/subject to active email provider.

Troubleshooting

Type errors indicate incorrect template props.
Missing branding usually means incomplete appConfig.email.template data.

Email Providers

Provider-specific environment configuration.

Onboarding

Customize the web onboarding flow with typed schema, step configuration, and filters.

How is this guide?

Last updated on 3/23/2026