Email Templates

The Email Templates handles user authentication and newsletter subscriptions through email, integrating with React Email for templating and sending emails. This component is designed to streamline the process of sending authentication emails via Supabase and newsletters via ConvertKit.

Features

📧 Creates, manages, and sends emails directly from your application with React Mail. Integrating seamlessly with popular email clients.

🚀 Customizes your authentication email templates using Supabase. Includes features like confirming signup, inviting users, magic link, changing email address, resetting password.

🖌️ Automates email newsletters with ConvertKit. Options include: Sending an email with an extract of new blog posts upon publication, scheduling automated weekly newsletters featuring recent posts

Screenshots

What's Included

< Layout />

Serves as a general layout for your email templates. It integrates with @react-email/components for layout and styling, and includes a header, footer, and main content area. The component also supports a preview text for email clients that display a preview snippet. The Layout component accepts the following props:

< Header />

Designed to serve as a header section structured with columns and sections to create a visually appealing header. It integrates with @react-email/components for layout and styling and includes the CompanyLogo component for displaying the company's logo.

< Footer />

The Footer component is designed to serve as the footer section in your email templates. It integrates with @react-email/components for layout and styling and displays links to various social media platforms, such as GitHub, LinkedIn, and Twitter, along with the company logo. The Footer component accepts the following props:

< Paragraph />

The Paragraph component is designed for rendering text content within the email. It uses the @react-email/components library for layout and styling, and it allows for centered or left-aligned text. The Paragraph component accepts the following props:

< Address />

The Address component is used for displaying the company's address at the bottom of the email, with an optional unsubscribe link for newsletters. This component is particularly useful when adhering to email compliance regulations that require the inclusion of a physical mailing address.The Adress component accepts the following props:

< ThanksMessage />

Renders a thank you message, it integrates with @react-email/components for layout and styling and includes the company name from constants.

< Button />

The Button component renders a clickable link styled as a button. It supports both primary and secondary styles, and it can be customized based on the needs of the email. The Button component accepts the following props:

< CallToAction />

The CallToAction component provides a more visually prominent call-to-action button within the email, using a larger font and more noticeable styling.

< Section />

The Section component provides a container for grouping related content within the email. It is styled with padding and a background color to visually separate sections of the email. The Section component accepts the following props:

< Tag />

The Tag component renders a label or tag, which can be styled differently depending on whether it's a primary or secondary tag. The Tag component accepts the following props:

< Title />

The Title component renders a heading within the email. It supports optional center alignment. The Title component accepts the following props:

Setup Component's Needs

• Easily set up by signing up for ConvertKit and configuring your environment variables:

CONVERTKIT_API_KEY=your-api-key
CONVERTKIT_FORM_ID=your-form-id
CONVERTKIT_REGISTER_TAG_ID=your-register-tag-id
CONVERTKIT_NEWSLETTER_TAG_ID=your-newsletter-tag-id