@azodik/templates

A comprehensive collection of React Email templates for the Azodik platform, featuring internationalization support and modern design patterns.

Introduction

@azodik/templates is a powerful React Email template library designed to simplify email creation for modern applications. Built with TypeScript and Zod validation, it provides a robust foundation for creating beautiful, responsive emails that work across all email clients.

The library includes pre-built templates for common use cases like user onboarding, security notifications, and marketing communications. Each template is fully customizable and supports multiple languages out of the box.

Features

🎨

Modern Design

Beautiful, responsive email templates built with React Email

🌍

Internationalization

Support for English, Hindi, Spanish, French, and German

🔧

TypeScript

Fully typed with Zod schemas for validation

📱

Responsive

Mobile-first approach for all email clients

🎯

Template Variety

Covers common use cases and business scenarios

🚀

Easy Integration

Simple API for rendering templates with variables

Installation

Install the package using your preferred package manager:

# Using npm
npm install @azodik/templates

# Using yarn
yarn add @azodik/templates

# Using pnpm
pnpm add @azodik/templates

Peer Dependencies

This package requires the following peer dependencies:

Quick Start

Here's a simple example of how to use the templates:

import { getTemplate, getSubject } from '@azodik/templates';

// Render a welcome email
const html = await getTemplate({
  template: 'welcome',
  variables: {
    name: 'John Doe',
    url: 'https://example.com',
    plan: 'Pro',
    region: 'US',
    nextBillingDate: '2024-01-15'
  },
  lang: 'en',
  appInfo: {
    name: 'MyApp',
    logo: 'https://example.com/logo.png',
    privacyPolicyUrl: 'https://example.com/privacy',
    termsOfServiceUrl: 'https://example.com/terms',
    cookiePolicyUrl: 'https://example.com/cookies',
    address: '123 Main St',
    city: 'New York',
    state: 'NY',
    zip: '10001',
    country: 'USA'
  }
});

// Get the email subject
const subject = getSubject('welcome', 'en');

Available Templates

Below is a comprehensive overview of all available templates, their use cases, and required data:

Welcome Email

Welcome new users to your platform with a personalized onboarding experience.
Use Case

User registration, account creation, subscription activation

Required Variables
  • name User's full name
  • url Action URL (e.g., dashboard link)
  • plan Subscription plan name
  • region User's region/country
  • nextBillingDate Next billing date

Verify Email

Email verification template for confirming user email addresses.
Use Case

Email verification, account activation, security confirmation

Required Variables
  • name User's full name
  • url Verification link

Password Reset

Secure password reset request template with action button.
Use Case

Forgot password, password recovery, security reset

Required Variables
  • name User's full name
  • url Password reset link

Password Changed

Confirmation email when a user's password is successfully changed.
Use Case

Password change confirmation, security notification

Required Variables
  • name User's full name
  • url Account settings URL
  • updateTime When password was changed
  • ipAddress IP address of the change
  • userAgent Browser/device info

Profile Updated

Notification email when user profile information is modified.
Use Case

Profile change confirmation, account update notification

Required Variables
  • name User's full name
  • url Profile settings URL
  • updateTime When profile was updated
  • ipAddress IP address of the update
  • userAgent Browser/device info

Login Alert

Security notification when a new login is detected on the user's account.
Use Case

New login detection, security alerts, suspicious activity

Required Variables
  • name User's full name
  • url Account security URL
  • loginTime When login occurred
  • ipAddress IP address of login
  • userAgent Browser/device info

Email Changed

Notification when a user's email address is successfully updated.
Use Case

Email change confirmation, account update notification

Required Variables
  • name User's full name
  • url Account settings URL
  • updateTime When email was changed
  • ipAddress IP address of the change
  • location Geographic location

Phone Changed

Notification when a user's phone number is successfully updated.
Use Case

Phone number change confirmation, account update notification

Required Variables
  • name User's full name
  • url Account settings URL
  • updateTime When phone was changed
  • ipAddress IP address of the change
  • location Geographic location

Marketing Newsletter

Professional newsletter template with content sections and unsubscribe options.
Use Case

Newsletter distribution, marketing campaigns, product updates

Required Variables
  • name User's full name
  • userEmail User's email address
  • newsletterLink Main newsletter content URL
  • unsubscribeLink Unsubscribe URL
  • managePreferencesLink Email preferences URL

API Reference

getTemplate(opts: GetTemplate)

Renders an email template with the provided options.

Parameters:

Parameter Type Required Description
template EmailTemplate Yes The template type to render
variables TemplateVariables Yes Template-specific variables
lang TemplateLanguage No Language code (defaults to 'en')
appInfo AppInfo Yes Application information object

Returns:

Promise<string> - HTML string of the rendered email

getSubject(template: EmailTemplate, lang: TemplateLanguage)

Gets the localized subject line for a template.

Parameters:

Parameter Type Required Description
template EmailTemplate Yes The template type
lang TemplateLanguage No Language code (defaults to 'en')

Returns:

string - Localized subject line

AppInfo Schema

The appInfo object contains comprehensive information about your application for branding and compliance purposes.

Required Fields

Field Type Description
name string Your application name
logo string (URL) URL to your application logo
privacyPolicyUrl string (URL) URL to your privacy policy
termsOfServiceUrl string (URL) URL to your terms of service
cookiePolicyUrl string (URL) URL to your cookie policy
address string Street address
city string City name
state string State/province
country string Country name
zip string ZIP/postal code

Optional Fields

Field Type Default Description
primaryColor string - Primary brand color (hex code)
secondaryColor string - Secondary brand color (hex code)
logoWidth number 100 Logo width in pixels
logoHeight number 100 Logo height in pixels
language string 'en' Default language code
theme string 'light' Theme preference
supportUrl string (URL) - Customer support URL
githubUrl string (URL) - GitHub repository URL
xUrl string (URL) - X (Twitter) profile URL 
// Example AppInfo object
const appInfo = {
  name: 'MyAwesomeApp',
  logo: 'https://example.com/logo.png',
  privacyPolicyUrl: 'https://example.com/privacy',
  termsOfServiceUrl: 'https://example.com/terms',
  cookiePolicyUrl: 'https://example.com/cookies',
  address: '123 Innovation Street',
  city: 'Tech City',
  state: 'CA',
  country: 'USA',
  zip: '90210',
  primaryColor: '#667eea',
  secondaryColor: '#764ba2',
  logoWidth: 120,
  logoHeight: 60,
  supportUrl: 'https://example.com/support',
  githubUrl: 'https://github.com/myapp',
  xUrl: 'https://x.com/myapp'
};

Note: The fullAddress field is automatically generated by combining address components.

Usage Examples

Welcome Email Example

import { getTemplate } from '@azodik/templates';

const welcomeEmail = await getTemplate({
  template: 'welcome',
  variables: {
    name: 'Alice Johnson',
    url: 'https://myapp.com/dashboard',
    plan: 'Enterprise',
    region: 'Europe',
    nextBillingDate: '2024-02-15'
  },
  lang: 'en',
  appInfo: {
    name: 'MyApp',
    logo: 'https://myapp.com/logo.png',
    privacyPolicyUrl: 'https://myapp.com/privacy',
    termsOfServiceUrl: 'https://myapp.com/terms',
    cookiePolicyUrl: 'https://myapp.com/cookies',
    address: '456 Business Ave',
    city: 'London',
    state: 'England',
    country: 'UK',
    zip: 'SW1A 1AA'
  }
});

Security Alert Example

import { getTemplate } from '@azodik/templates';

const loginAlert = await getTemplate({
  template: 'login-alert',
  variables: {
    name: 'Bob Smith',
    url: 'https://myapp.com/security',
    loginTime: '2024-01-15T10:30:00Z',
    ipAddress: '192.168.1.100',
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
  },
  lang: 'en',
  appInfo: {
    name: 'MyApp',
    logo: 'https://myapp.com/logo.png',
    privacyPolicyUrl: 'https://myapp.com/privacy',
    termsOfServiceUrl: 'https://myapp.com/terms',
    cookiePolicyUrl: 'https://myapp.com/cookies',
    address: '456 Business Ave',
    city: 'London',
    state: 'England',
    country: 'UK',
    zip: 'SW1A 1AA'
  }
});

Newsletter Example

import { getTemplate } from '@azodik/templates';

const newsletter = await getTemplate({
  template: 'marketing-newsletter',
  variables: {
    name: 'Carol Davis',
    userEmail: 'carol@example.com',
    newsletterLink: 'https://myapp.com/newsletter/123',
    unsubscribeLink: 'https://myapp.com/unsubscribe?token=abc123',
    managePreferencesLink: 'https://myapp.com/preferences'
  },
  lang: 'en',
  appInfo: {
    name: 'MyApp',
    logo: 'https://myapp.com/logo.png',
    privacyPolicyUrl: 'https://myapp.com/privacy',
    termsOfServiceUrl: 'https://myapp.com/terms',
    cookiePolicyUrl: 'https://myapp.com/cookies',
    address: '456 Business Ave',
    city: 'London',
    state: 'England',
    country: 'UK',
    zip: 'SW1A 1AA'
  }
});

Azodik • GitHub