Skip to main content
A block of text separated by blank spaces.

​
Installation

npm install @react-email/text -E

​
Usage

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

const Email = () => {
  return <Text>Lorem ipsum</Text>;
};

​
Props

The Text component accepts all standard HTML paragraph (<p>) element attributes.
​
children
ReactNode
The text content to display
​
style
React.CSSProperties
Inline styles for the text. Default styles provide sensible margins and typography

​
Default Styles

The Text component includes these default styles:
  • fontSize: 14px - Base font size
  • lineHeight: 24px - Line height for readability
  • marginTop: 16px - Top margin (can be overridden)
  • marginBottom: 16px - Bottom margin (can be overridden)

​
Styling Example

import { Text } from "@react-email/text";

const Email = () => {
  return (
    <>
      <Text style={{ fontSize: "18px", fontWeight: "bold" }}>
        Important Message
      </Text>
      <Text style={{ color: "#666", fontSize: "14px" }}>
        This is the body text of your email with additional details.
      </Text>
    </>
  );
};

​
TypeScript

export type TextProps = Readonly<React.ComponentPropsWithoutRef<'p'>>;

​
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