Appearance

Row ​

Separates content boundaries horizontally

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

Add the component to your email template. Include styles where needed.

jsx
import { Column, Row, Section } from 'jsx-email';

const Email = () => {
  return (
    <Section>
      <Row>
        <Column>A</Column>
      </Row>
      <Row>
        <Column>B</Column>
      </Row>
      <Row>
        <Column>C</Column>
      </Row>
    </Section>
  );
};
import { Column, Row, Section } from 'jsx-email';

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

INFO

Though the Row component wraps a table element, it is not designed to identically mimic a table, rather provide a visual row element that has maximum email client compatibility. Setting cellPadding or cellSpacing on a Row component can achieve similar results to using a custom table element, but it's not recommended. For custom behavior and for needs like cellPadding it's recommended to use a table element instead of Row.

Component Props ​

ts
disableDefaultStyle?: boolean;
disableDefaultStyle?: boolean;

If true, instructs the component not to add default style properties to the component. This can be useful when attempting to override default styles with Tailwind or class names.

TIP

This component also expresses all of the Common Component Props for ComponentProps<'table'>.