feat: Add Stack and Columns layout components

.changeset/rich-days-love.md

@@ -0,0 +1,8 @@
+---
+"@react-email/columns": minor
+"@react-email/stack": minor
+"docs": patch
+"@react-email/components": patch
+---
+
+- Add new layout primitives: Columns and Stack components with gap support and docs updates.

apps/docs/components/columns.mdx

@@ -0,0 +1,116 @@
+---
+title: "Columns"
+sidebarTitle: "Columns"
+description: "Place content side by side in two or more columns. Equal or custom widths, with optional spacing—no need to hand-wire Row and Column."
+"og:image": "https://react.email/static/covers/section.png"
+icon: "columns"
+---
+
+import Support from '/snippets/support.mdx'
+
+## Install
+
+Install component from your command line.
+
+<CodeGroup>
+
+```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
+npm install @react-email/columns -E
+```
+
+```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
+yarn add @react-email/columns -E
+```
+
+```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
+pnpm add @react-email/columns -E
+```
+
+</CodeGroup>
+
+## Getting started
+
+Use Columns to place content side by side in two or more columns. Add it inside a **Section**; set `gap` for space between columns and optionally `columnWidths` for custom widths.
+
+```jsx
+import { Section, Columns, Text } from "@react-email/components";
+
+const Email = () => (
+  <Section>
+    <Columns gap={16}>
+      <Text>Left column</Text>
+      <Text>Right column</Text>
+    </Columns>
+  </Section>
+);
+```
+
+## Compared to Row + Column
+
+The same layout can be built with **Row** and **Column**—manual widths and padding for gap. Columns is a thin wrapper that does it with one component and optional `gap` and `columnWidths` props.
+
+**With Row + Column (primitives):**
+
+```jsx
+import { Section, Row, Column, Text } from "@react-email/components";
+
+const Email = () => (
+  <Section>
+    <Row>
+      <Column style={{ width: "50%", paddingRight: "8px" }}>
+        <Text>Left column</Text>
+      </Column>
+      <Column style={{ width: "50%", paddingLeft: "8px" }}>
+        <Text>Right column</Text>
+      </Column>
+    </Row>
+  </Section>
+);
+```
+
+**With Columns (same result, less code):**
+
+```jsx
+import { Section, Columns, Text } from "@react-email/components";
+
+const Email = () => (
+  <Section>
+    <Columns gap={16}>
+      <Text>Left column</Text>
+      <Text>Right column</Text>
+    </Columns>
+  </Section>
+);
+```
+
+## Props
+
+<ResponseField name="cols" type="number">
+  Number of columns for equal-width layout. Defaults to the number of children.
+</ResponseField>
+
+<ResponseField name="gap" type="string | number" default="0">
+  Space between columns. Implemented with spacer columns and <code>calc()</code> widths so total width stays 100%. A number is treated as pixels; a string is used as-is.
+</ResponseField>
+
+<ResponseField name="columnWidths" type="string[]">
+  Explicit width per column (e.g. `["60%", "40%"]`). When provided, overrides equal splitting.
+</ResponseField>
+
+<ResponseField name="style" type="object">
+  Inline styles applied to the underlying row.
+</ResponseField>
+
+<Support/>

apps/docs/components/stack.mdx

@@ -0,0 +1,117 @@
+---
+title: "Stack"
+sidebarTitle: "Stack"
+description: "Place blocks one under the other with consistent spacing between them. No need to hand-wire rows or margins."
+"og:image": "https://react.email/static/covers/section.png"
+icon: "layer-group"
+---
+
+import Support from '/snippets/support.mdx'
+
+## Install
+
+Install component from your command line.
+
+<CodeGroup>
+
+```sh npm
+npm install @react-email/components -E
+
+# or get the individual package
+
+npm install @react-email/stack -E
+```
+
+```sh yarn
+yarn add @react-email/components -E
+
+# or get the individual package
+
+yarn add @react-email/stack -E
+```
+
+```sh pnpm
+pnpm add @react-email/components -E
+
+# or get the individual package
+
+pnpm add @react-email/stack -E
+```
+
+</CodeGroup>
+
+## Getting started
+
+Use Stack to place blocks one under the other with consistent spacing. Add it inside a **Section**; set `gap` for the space between items.
+
+```jsx
+import { Section, Stack, Text } from "@react-email/components";
+
+const Email = () => (
+  <Section>
+    <Stack gap={16}>
+      <Text>First block</Text>
+      <Text>Second block</Text>
+      <Text>Third block</Text>
+    </Stack>
+  </Section>
+);
+```
+
+## Compared to Section + Row
+
+The same layout can be built with **Section**, **Row**, and **Column** — one row per block, each block in a Column. Stack is a thin wrapper around **Row** and **Column** (same primitives as **Columns**) that does it with one component and a single `gap` prop.
+
+**With Section + Row (primitives):**
+
+```jsx
+import { Section, Row, Column, Text } from "@react-email/components";
+
+const Email = () => (
+  <Section>
+    <Row style={{ marginBottom: 16 }}>
+      <Column>
+        <Text>First block</Text>
+      </Column>
+    </Row>
+    <Row style={{ marginBottom: 16 }}>
+      <Column>
+        <Text>Second block</Text>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Text>Third block</Text>
+      </Column>
+    </Row>
+  </Section>
+);
+```
+
+**With Stack (same result, less code):**
+
+```jsx
+import { Section, Stack, Text } from "@react-email/components";
+
+const Email = () => (
+  <Section>
+    <Stack gap={16}>
+      <Text>First block</Text>
+      <Text>Second block</Text>
+      <Text>Third block</Text>
+    </Stack>
+  </Section>
+);
+```
+
+## Props
+
+<ResponseField name="gap" type="string | number" default="0">
+  Spacing between stacked children. A number is treated as pixels (e.g. `16` → `16px`); a string is used as-is (e.g. `"1em"`).
+</ResponseField>
+
+<ResponseField name="style" type="object">
+  Inline styles applied to each row (Stack renders one Row per child).
+</ResponseField>
+
+<Support/>

apps/docs/docs.json

@@ -70,6 +70,7 @@
               "components/code-block",
               "components/code-inline",
               "components/column",
+              "components/columns",
               "components/row",
               "components/font",
               "components/heading",
@@ -79,6 +80,7 @@
               "components/markdown",
               "components/preview",
               "components/section",
+              "components/stack",
               "components/tailwind",
               "components/text"
             ]

packages/columns/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @react-email/columns
+
+## 0.0.1
+
+### Added
+
+- Initial release: multi-column layout component with configurable widths and gap.

packages/columns/license.md

@@ -0,0 +1,7 @@
+Copyright 2026 Plus Five Five, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/columns/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@react-email/columns",
+  "version": "0.0.1",
+  "description": "A multi-column layout component for React Email",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsdown src/index.ts --format esm,cjs --dts --external react --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "dependencies": {
+    "@react-email/column": "workspace:0.0.14",
+    "@react-email/row": "workspace:0.0.13"
+  },
+  "devDependencies": {
+    "@react-email/render": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typescript": "5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/resend/react-email.git",
+    "directory": "packages/columns"
+  },
+  "keywords": [
+    "react",
+    "email",
+    "layout",
+    "columns"
+  ]
+}

packages/columns/readme.md

@@ -0,0 +1,60 @@
+![React Email Section cover](https://react.email/static/covers/section.png)
+
+<div align="center"><strong>@react-email/columns</strong></div>
+<div align="center">A multi-column layout component with equal or custom widths and optional gap.</div>
+<br />
+<div align="center">
+<a href="https://react.email">Website</a>
+<span> · </span>
+<a href="https://github.com/resend/react-email">GitHub</a>
+
+</div>
+
+## Install
+
+Install component from your command line.
+
+#### With yarn
+
+```sh
+yarn add @react-email/columns -E
+```
+
+#### With npm
+
+```sh
+npm install @react-email/columns -E
+```
+
+## Getting started
+
+Add the component inside a Section. Include styles where needed.
+
+```jsx
+import { Section } from '@react-email/section';
+import { Columns } from '@react-email/columns';
+import { Text } from '@react-email/text';
+
+const Email = () => {
+  return (
+    <Section>
+      <Columns gap={16}>
+        <Text>Left column</Text>
+        <Text>Right column</Text>
+      </Columns>
+    </Section>
+  );
+};
+```
+
+## Support
+
+This component was tested using the most popular email clients.
+
+| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
+| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| Gmail ✔                                                                                           | Apple Mail ✔                                                                                           | Outlook ✔                                                                                             | Yahoo! Mail ✔                                                                                                | HEY ✔                                                                                         | Superhuman ✔                                                                                                |
+
+## License
+
+MIT License