A collection of beautifully designed, accessible, and customizable email components for React Email, MJML React, and JSX Email. Works with shadcn/ui.

How do I use emailcn?

Use npx shadcn@latest add with our registry URL to install components and blocks. Themes, components, and blocks are all installable via the shadcn CLI.

Is emailcn open source?

Yes. The source is on GitHub and released under the MIT License.

Product Grid

Bento Product Grid rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

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/react-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.

Image Grid Stats Grid

Edit this page Follow @shadcnlabs Join community