Email templates

Ten emails drawn from the theme and the brand settings, each previewed live, with HTML that carries Resend placeholders, ready to copy.

How to use

The preview shows each email with sample words, such as “Olivia”, in the page’s theme. Switch the theme to see the dark version.
Copy HTML copies the same email for the theme shown, with a placeholder such as {{{FIRST_NAME}}} wherever the sample words were.
Paste it into a new template in Resend’s template editor. When you send with that template, Resend replaces each placeholder with the value you give it for that recipient, exactly as given, so pass the values through resendVariables from @/emails/placeholders first: it escapes names a user typed and refuses a link that is not http or https.
Send the light version. Many email apps handle dark mode their own way, so the dark copy is for when you know the reader wants it.

Placeholders

{{{FIRST_NAME}}}: The recipient’s first name.
{{{EMAIL}}}: The recipient’s email address, shown in the footer.
{{{ACTION_URL}}}: Where the main button goes: log in, accept the invite, verify, download.
{{{UNSUBSCRIBE_URL}}}: The recipient’s own unsubscribe link.
{{{PREFERENCES_URL}}}: The recipient’s email preferences page.
{{{INVITER_NAME}}}: The name of the person who sent the invite.
{{{TEAM_NAME}}}: The team the recipient is invited to.
{{{CODE_1}}}: The first digit of the verification code.
{{{CODE_2}}}: The second digit of the verification code.
{{{CODE_3}}}: The third digit of the verification code.
{{{CODE_4}}}: The fourth digit of the verification code.
{{{VIDEO_URL}}}: Where the video still and watch button go.

Send it from your app

Your app can also send a template directly, passing the real values where the placeholders would go. Set EMAIL_ASSET_URL to where your site serves public/emails/ first: a production server will not render an email without it.

import { Resend } from "resend"; import { SimpleWelcome01 } from "@/emails/simple-welcome-01"; const resend = new Resend(process.env.RESEND_API_KEY); await resend.emails.send({ from: "DrumKit <hello@drumkit.design>", to: user.email, subject: "Welcome to DrumKit", react: ( <SimpleWelcome01 firstName={user.firstName} email={user.email} actionUrl={loginUrl} unsubscribeUrl={unsubscribeUrl} preferencesUrl={preferencesUrl} /> ), });

Or send the template you pasted into Resend, with every value escaped:

import { Resend } from "resend"; import { resendVariables } from "@/emails/placeholders"; const resend = new Resend(process.env.RESEND_API_KEY); await resend.emails.send({ from: "DrumKit <hello@drumkit.design>", to: invitee.email, subject: `${inviter.name} invited you to ${team.name}`, template: { id: "simple-invite", variables: resendVariables({ FIRST_NAME: invitee.firstName, INVITER_NAME: inviter.name, TEAM_NAME: team.name, ACTION_URL: inviteUrl, EMAIL: invitee.email, UNSUBSCRIBE_URL: unsubscribeUrl, PREFERENCES_URL: preferencesUrl, }), }, });