# React Email Integration (/framework/content/react-email) Learn how to use React Email to build beautiful email templates React Email is a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It's a great way to build email templates that are consistent with your brand and easy to maintain. ## Getting Started ```bash npm install @react-email/components react-email ``` ```tsx import { Body, Container, Head, Html, render, } from '@react-email/components'; import * as React from "react"; interface TestEmailProps { name: string } export const TestEmailTemplate = ({ name }: TestEmailProps) => { return ( Hello {name} welcome to your first React E-mail template! ); }; export default TestEmailTemplate; export function renderEmail(name: string) { return render(); } ``` ```tsx import { workflow } from '@novu/framework'; import { renderEmail } from './emails/test-email'; import { z } from 'zod'; export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => { await step.email('send-email', async (controls) => { return { subject: controls.subject, body: renderEmail(payload.userName), }; }, { controlSchema: z.object({ subject: z.string().default('A Successful Test on Novu from {{userName}}'), }), }); }, { payloadSchema: z.object({ userName: z.string().default('John Doe'), }), }); ```