Themes
Marketing
Ecommerce
One Grid component renders every layout. Pick a column arrangement with the
layout prop and pass content through the cells array. Each entry in cells
fills the next column.
One Column
Two Columns
Three Columns
Four Columns
1-3 Split
3-1 Split
Installation
$ pnpm dlx shadcn@latest add @emailcn/grid
Usage
import { Grid } from "@/components/emails/ui-elements/grids/grid";<Grid layout="2" cells={["Left column", "Right column"]} />
<Grid layout="1-3" cells={["Sidebar", "Main content area"]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
layout | "1" | "2" | "3" | "4" | "1-3" | "3-1" | "2" | Column arrangement / widths |
cells | string[] | [] | Content for each column, in order |
align | "left" | "center" | "right" | "center" | Text alignment within columns |
theme | EmailThemeTokens | defaultTheme | Email theme styling |