Skip to main content
A React html component to wrap emails. This is the root component that wraps all other email content.

​
Installation

npm install @react-email/html -E

​
Usage

Add the component to your email template. Include styles where needed. 
import { Button } from "@react-email/button";
import { Html } from "@react-email/html";

const Email = () => {
  return (
    <Html lang="en">
      <Button href="https://example.com" style={{ color: "#61dafb" }}>
        Click me
      </Button>
    </Html>
  );
};

​
Props

The Html component accepts all standard HTML attributes for the <html> element, plus:
​
lang
string
default:"en"
The language of the email content
​
dir
string
default:"ltr"
The text direction of the email content. Use "rtl" for right-to-left languages
​
children
ReactNode
The content of your email
​
style
CSSProperties
Inline styles for the html element

​
TypeScript

export type HtmlProps = Readonly<React.ComponentPropsWithoutRef<'html'>>;

​
Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman
✔✔✔✔✔✔

Build docs developers (and LLMs) love

Get started for freeTalk to us