React Email

Introduction

React Email is a library for building emails with React. In this guide, we will show you how to use Unsent with React Email to send beautiful, dynamic emails.

Install dependencies

First, install the Unsent SDK and React Email render package.

npm install @unsent/sdk @react-email/render

pnpm add @unsent/sdk @react-email/render

yarn add @unsent/sdk @react-email/render

bun add @unsent/sdk @react-email/render

Create an email template

Create a new file emails/welcome.tsx (or any other name) and add your email template.

emails/welcome.tsx

import * as React from "react";
import { Html, Button, Text } from "@react-email/components";

interface WelcomeEmailProps {
  url: string;
  name: string;
}

export function WelcomeEmail({ url, name }: WelcomeEmailProps) {
  return (
    <Html lang="en">
      <Text>Welcome, {name}!</Text>
      <Button href={url}>Click me</Button>
    </Html>
  );
}

Send an email using Unsent

Now you can render the email template to HTML and send it using the Unsent SDK.

app/api/send/route.ts

import { Unsent } from "@unsent/sdk";
import { render } from "@react-email/render";
import { WelcomeEmail } from "@/emails/welcome";

const unsent = new Unsent(process.env.UNSENT_API_KEY);

export async function POST() {
  const html = await render(<WelcomeEmail url="https://unsent.dev" name="User" />);

  const { data, error } = await unsent.emails.send({
    to: "hello@unsent.dev",
    from: "onboarding@unsent.dev",
    subject: "Welcome to Unsent",
    html,
  });

  if (error) {
    return Response.json({ error }, { status: 500 });
  }

  return Response.json(data);
}

Build your project

JavaScript

If you're using Node.js with JavaScript, importing .jsx or .tsx files might require Babel configuration. Add this to your Babel config:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

TypeScript

For TypeScript projects, ensure jsx is configured in your tsconfig.json:

{
  "compilerOptions": { "jsx": "react-jsx" }
}