Skip to main content
A React row component for creating horizontal layouts in emails.

​
Installation

npm install @react-email/row -E

​
Usage

Add the component to your email template. Include styles where needed. 
import { Section } from "@react-email/section";
import { Row } from "@react-email/row";
import { Column } from "@react-email/column";

const Email = () => {
  return (
    <Section>
      <Row>
        <Column>A</Column>
      </Row>
      <Row>
        <Column>B</Column>
      </Row>
      <Row>
        <Column>C</Column>
      </Row>
    </Section>
  );
};

​
Props

The Row component accepts all standard HTML table attributes.
​
children
ReactNode
required
The content to place inside the row, typically Column components
​
style
React.CSSProperties
Inline styles for the row

​
Implementation Details

The Row component renders as a table with:
  • Centered alignment
  • Full width (100%)
  • No border, cellPadding, or cellSpacing
  • role="presentation" for accessibility
  • Children wrapped in a table row (<tr>)

​
TypeScript

export type RowProps = Readonly<
  React.ComponentPropsWithoutRef<'table'> & {
    children: React.ReactNode;
  }
>;

​
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