> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usesend.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Use with React Email
> A guide on how to use useSend with React Email
## Introduction
[React Email](https://react.email/docs/introduction) is a library for building emails with React. In this guide, we will show you how to use useSend with React Email.
## Install dependencies
```sh npm theme={null}
npm install usesend-js @react-email/render
```
```sh yarn theme={null}
yarn add usesend-js @react-email/render
```
```sh pnpm theme={null}
pnpm add usesend-js @react-email/render
```
```sh bun theme={null}
bun add usesend-js @react-email/render
```
## Create an email template
```tsx theme={null}
import * as React from "react";
import { Html } from "@react-email/html";
import { Button } from "@react-email/button";
export function Email(props) {
const { url } = props;
return (
);
}
```
## Send an email using useSend
```ts theme={null}
import { UseSend } from "usesend-js";
import { render } from "@react-email/render";
import { Email } from "./email";
const usesend = new UseSend("us_your_usesend_api_key");
const html = await render();
const response = await usesend.emails.send({
to: "hello@usesend.com",
from: "hello@usesend.com",
subject: "useSend email",
html,
});
```
## Build your project
### JavaScript
If you're using nodejs, importing `email.jsx` might fail. make sure to add these to your babel config:
```js theme={null}
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
```
Checkout this [example](https://github.com/usesend/unsend-js-examples/tree/main/react-email-js)
### TypeScript
Just add `jsx` to your `tsconfig.json`
```json theme={null}
{
"compilerOptions": { "jsx": "react-jsx" }
}
```
Checkout this [example](https://github.com/usesend/unsend-js-examples/tree/main/react-email-ts)