Getting Started
Manual Setup
Getting Started
Manual Setup
Create a brand-new folder with packages powered by React Email.
Are you using monorepos? Then we recommend you follow our monorepos setup.
1. Create directory
Create a new folder called react-email-starter and initialize a new npm project:
mkdir react-email-starter
cd react-email-starter
npm init
2. Install dependencies
Install the React Email package locally and a few components.
3. Add scripts
Include the following script in your package.json file.
package.json
{
"scripts": {
"dev": "email dev"
}
}
4. Include email template
Create a new folder called emails, create a file inside called index.tsx, and add the following code:
index.tsx
import { Button, Html } from "@react-email/components";
import * as React from "react";
export default function Email() {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Html>
);
}
5. Run locally
Start the development server.
6. See changes live
Visit localhost:3000 and edit the index.tsx file to see the changes.
7. Next steps
Try adding these other components to your email.