Skip to main content
Display a divider that separates content areas in your email.

​
Installation

npm install @react-email/hr -E

​
Usage

Add the component to your email template. Include styles where needed. 
import { Hr } from "@react-email/hr";

const Email = () => {
  return <Hr />;
};

​
Props

The Hr component accepts all standard HTML <hr> element attributes.
​
style
React.CSSProperties
Inline styles for the horizontal rule. Default styles provide a subtle divider

​
Default Styles

The Hr component includes these default styles:
  • width: 100% - Full width divider
  • border: none - No default border
  • borderTop: 1px solid #eaeaea - Light gray top border

​
Styling Examples

​
Custom Color and Thickness

import { Hr } from "@react-email/hr";

const Email = () => {
  return (
    <Hr style={{ borderTop: "2px solid #333" }} />
  );
};

​
With Margin Spacing

import { Hr } from "@react-email/hr";

const Email = () => {
  return (
    <Hr style={{ margin: "24px 0", borderTop: "1px solid #ccc" }} />
  );
};

​
Dashed Style

import { Hr } from "@react-email/hr";

const Email = () => {
  return (
    <Hr style={{ borderTop: "1px dashed #999" }} />
  );
};

​
TypeScript

export type HrProps = Readonly<React.ComponentPropsWithoutRef<'hr'>>;

​
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