Vibekit

Email Templates

Create and preview transactional email templates with React Email.

Email templates live in packages/mail/emails and are written using React Email components.

Available templates

  • newUser: Sent when a user signs up to verify their email address.
  • forgotPassword: Sent when a user requests a password reset code.
  • magicLink: Sent for passwordless OTP sign-in.
  • emailChange: Sent to confirm changing an email address.
  • teamInvitation: Invitation to join a team.

Previewing emails locally

Launch the email preview application:

bun run mail:preview

Open http://localhost:3005 in your browser. Any edits made to files in packages/mail/emails will update live.

Creating a new template

  1. Add a new React component file in packages/mail/emails/MyTemplate.tsx:
import { Body, Container, Head, Heading, Html, Preview, Text } from "react-email";

export function MyTemplate({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to the platform</Preview>
      <Body className="bg-slate-50 font-sans">
        <Container className="mx-auto max-w-lg p-6 bg-white rounded-lg shadow-sm">
          <Heading className="text-xl font-bold">Hello {name}!</Heading>
          <Text className="text-gray-600">Thanks for joining us.</Text>
        </Container>
      </Body>
    </Html>
  );
}

export default MyTemplate;
  1. Register the component in mailTemplates in packages/mail/util/templates.ts. Add its subject and body translations to every dictionary under packages/i18n/translations/. Match the existing BaseMailProps pattern so sendEmail can supply the locale and translations.

Learn about file uploads in Storage Overview.

On this page

Available templatesPreviewing emails locallyCreating a new template