TemplateChooser

TemplateChooser combines system templates and team templates into a reusable picker with real previews. Its required purpose prop defensively removes incompatible items even if the host passes an unfiltered response. Section headings/descriptions, the loading label, and the empty-templates message are all props with English defaults.

System

Built-in starters for common email styles and use cases.

Your templates

Your saved templates, ready to reuse.

Usage

This is the exact code behind the demo above (with each template's content shortened to defaultTemplateEmail for brevity — the demo uses a fuller sample email for "Announcement" and "Customer update").

import { useMemo, useState } from "react";
import {
    TemplateChooser,
    defaultTemplateEmail,
    type SystemTemplateSummary,
    type EmailTemplate,
} from "@sendlit/email-blocks";

const now = new Date().toISOString();

const systemTemplates: SystemTemplateSummary[] = [
    {
        templateId: "announcement",
        title: "Announcement",
        description: "Launch a feature, webinar, or limited-time offer.",
        purpose: "marketing",
        content: defaultTemplateEmail,
        requiredVariables: [],
    },
    {
        templateId: "blank",
        title: "Blank",
        description: "Start from the required unsubscribe and address footer.",
        purpose: "marketing",
        content: defaultTemplateEmail,
        requiredVariables: [],
    },
];

const savedTemplates: EmailTemplate[] = [
    {
        templateId: "customer-update",
        title: "Customer update",
        purpose: "marketing",
        content: defaultTemplateEmail,
        requiredVariables: [],
        createdAt: now,
        updatedAt: now,
    },
];

function Example() {
    const [selectedTemplate, setSelectedTemplate] = useState("announcement");

    const selectedTemplateLabel = useMemo(() => {
        const allTemplates = [...systemTemplates, ...savedTemplates];
        return allTemplates.find(
            (template) => template.templateId === selectedTemplate,
        )?.title;
    }, [selectedTemplate]);

    return (
        <TemplateChooser
            purpose="marketing"
            systemTemplates={systemTemplates}
            templates={savedTemplates}
            onSelect={({ templateId }) => setSelectedTemplate(templateId)}
        />
    );
}