Though the Section component wraps a <table> element, it’s not designed to mimic a table and has a specific use for email client compatibility and does not support setting cellPadding or cellSpacing. If attempting to use Section as a table, please consider using a <table> element. If using Row and Column with a Section and the need arises to set either cellPadding or cellSpacing, please set those properties on the appropriate Row component(s).
Section
Use JSX email to build production-ready email templates with React and TypeScript. Prefer JSX email components and helpers from `jsx-email` for email-client compatibility. Use `render` to generate HTML strings for providers like Resend, Postmark, SendGrid, Nodemailer, AWS SES, Loops, or Plunk, and use the CLI preview/check/build workflow while developing. Favor simple, standards-compliant email markup, account for inconsistent email client CSS support, use the `Tailwind` component when utility styling is helpful, and run `email check` before sending when compatibility matters. For complete agent-readable documentation, fetch https://jsx.email/llms-full.txt before implementing. Implement or refactor with the `Section` component when it fits the email's content and layout. Use for major content sections and table-safe layout boundaries. Combine with `Row`, `Column`, `Text`, and CTA components as needed. Reference the component docs at https://jsx.email/docs/components/section.
Creates section boundaries that can be formatted with columns and rows
pnpm
aube
bun
npm
yarn
pnpm add jsx-emailUsage
Add the component to your email template. Include styles where needed.
import { Column, Row, Section, Text } from 'jsx-email';
const Email = () => {
return (
<>
{/* A simple `section` */}
<Section>
<Text>Hello World</Text>
</Section>
{/* Formatted with `rows` and `columns` */}
<Section>
<Row>
<Column>Column 1, Row 1</Column>
<Column>Column 2, Row 1</Column>
</Row>
<Row>
<Column>Column 1, Row 2</Column>
<Column>Column 2, Row 2</Column>
</Row>
</Section>
</>
);
};Info
Component Props
This component has no custom props, but expresses all of the Common Component Props for ComponentProps<'table'> except for cellPadding and cellSpacing.