import { BentoProductGrid } from "@/components/email/bento-product-grid";
import { defaultTheme } from "@/components/email/theme-default";
export function BentoProductGridDemo() {
return (
<BentoProductGrid
variant="two-row-three-column"
style="sides"
placement="normal"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/bento-product-grid
Usage
import { BentoProductGrid } from "@/components/email/bento-product-grid";<BentoProductGrid
variant="two-row-three-column"
style="sides"
placement="normal"
/>Examples
Bento grid with two rows and 3-column second row
full
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleFullVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
variant="two-row-three-column"
style="full"
placement="normal"
/>
);
}full reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleFullVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="full"
variant="two-row-three-column"
/>
);
}left
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleLeftVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="left"
variant="two-row-three-column"
/>
);
}left reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleLeftVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="left"
variant="two-row-three-column"
/>
);
}right
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleRightVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="right"
variant="two-row-three-column"
/>
);
}right reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleRightVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="right"
variant="two-row-three-column"
/>
);
}sides
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleSidesVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="sides"
variant="two-row-three-column"
/>
);
}sides reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleSidesVariantTwoRowThreeColumnExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="sides"
variant="two-row-three-column"
/>
);
}Bento grid with even split and two-thirds
full
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleFullVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="full"
variant="even-split-two-thirds"
/>
);
}full reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleFullVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="full"
variant="even-split-two-thirds"
/>
);
}left
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleLeftVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="left"
variant="even-split-two-thirds"
/>
);
}left reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleLeftVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="left"
variant="even-split-two-thirds"
/>
);
}right
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleRightVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="right"
variant="even-split-two-thirds"
/>
);
}right reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleRightVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="right"
variant="even-split-two-thirds"
/>
);
}sides
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementNormalStyleSidesVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="normal"
style="sides"
variant="even-split-two-thirds"
/>
);
}sides reverse
import { BentoProductGrid } from "@/components/email/bento-product-grid";
export function BentoProductGridPlacementReverseStyleSidesVariantEvenSplitTwoThirdsExampleDemo() {
return (
<BentoProductGrid
placement="reverse"
style="sides"
variant="even-split-two-thirds"
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
variant | "two-row-three-column" | "even-split-two-thirds" | "two-row-three-column" | Selects the product-grid layout. |
style | "full" | "left" | "right" | "sides" | "full" | Controls which product cards use padded treatment. |
placement | "normal" | "reverse" | "normal" | Keeps or reverses the row treatment. |
data | { bottom: [{ price: string; description?: string; imageAlt: string; imageSrc: string; title: string }, { price: string; description?: string; imageAlt: string; imageSrc: string; title: string }, { price: string; description?: string; imageAlt: string; imageSrc: string; title: string }]; top: [{ price: string; description?: string; imageAlt: string; imageSrc: string; title: string }, { price: string; description?: string; imageAlt: string; imageSrc: string; title: string }] } | { bottom: [{ price: string; description?: string; imageAlt: string; imageSrc: string; title: string }, { price: string; description?: string; imageAlt: string; imageSrc: string; title: string }]; top: [{ price: string; description?: string; imageAlt: string; imageSrc: string; title: string }, { price: string; description?: string; imageAlt: string; imageSrc: string; title: string }] } | Built-in data for the selected layout | Replaces the product data for the selected layout variant. |
BentoProductGridProps is a discriminated union. The selected variant
narrows the accepted data shape.