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.

Image Grid

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

React Email MJML React JSX Email

import { BentoImageGrid } from "@/components/email/bento-image-grid";
import { defaultTheme } from "@/components/email/theme-default";

export function BentoImageGridDemo() {
  return (
    <BentoImageGrid
      variant="alternating"
      style="captions"
      placement="captions-top"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/jsx-email/bento-image-grid

Usage

import { BentoImageGrid } from "@/components/email/bento-image-grid";

<BentoImageGrid
  variant="alternating"
  style="captions"
  placement="captions-top"
/>

Examples

Bento grid with images and captions

captions-top

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridVariantAlternatingStyleCaptionsPlacementCaptionsTopExampleDemo() {
  return (
    <BentoImageGrid
      variant="alternating"
      style="captions"
      placement="captions-top"
    />
  );
}

captions-top-reverse

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopReverseStyleCaptionsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top-reverse"
      style="captions"
      variant="alternating"
    />
  );
}

captions-bottom

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomStyleCaptionsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom"
      style="captions"
      variant="alternating"
    />
  );
}

captions-bottom-reverse

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomReverseStyleCaptionsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom-reverse"
      style="captions"
      variant="alternating"
    />
  );
}

Bento grid with images and details

captions-top

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top"
      style="details"
      variant="alternating"
    />
  );
}

captions-top-reverse

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopReverseStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top-reverse"
      style="details"
      variant="alternating"
    />
  );
}

captions-top-alt

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopAltStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top-alt"
      style="details"
      variant="alternating"
    />
  );
}

captions-top-alt-reverse

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopAltReverseStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top-alt-reverse"
      style="details"
      variant="alternating"
    />
  );
}

captions-bottom

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom"
      style="details"
      variant="alternating"
    />
  );
}

captions-bottom-reverse

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomReverseStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom-reverse"
      style="details"
      variant="alternating"
    />
  );
}

captions-bottom-alt

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomAltStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom-alt"
      style="details"
      variant="alternating"
    />
  );
}

captions-bottom-alt-reverse

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomAltReverseStyleDetailsVariantAlternatingExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom-alt-reverse"
      style="details"
      variant="alternating"
    />
  );
}

Bento grid with 3 columns and flush images

captions-top

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopStyleFlushVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top"
      style="flush"
      variant="three-column"
    />
  );
}

captions-top-alt

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopAltStyleFlushVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top-alt"
      style="flush"
      variant="three-column"
    />
  );
}

captions-bottom

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomStyleFlushVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom"
      style="flush"
      variant="three-column"
    />
  );
}

captions-bottom-alt

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomAltStyleFlushVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom-alt"
      style="flush"
      variant="three-column"
    />
  );
}

Bento grid with 3 columns and padded images

captions-top

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopStylePaddedVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top"
      style="padded"
      variant="three-column"
    />
  );
}

captions-top-alt

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsTopAltStylePaddedVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-top-alt"
      style="padded"
      variant="three-column"
    />
  );
}

captions-bottom

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomStylePaddedVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom"
      style="padded"
      variant="three-column"
    />
  );
}

captions-bottom-alt

import { BentoImageGrid } from "@/components/email/bento-image-grid";

export function BentoImageGridPlacementCaptionsBottomAltStylePaddedVariantThreeColumnExampleDemo() {
  return (
    <BentoImageGrid
      placement="captions-bottom-alt"
      style="padded"
      variant="three-column"
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`variant`	`"alternating" \| "three-column"`	`"alternating"`	Selects the alternating or three-column layout.
`style`	`"captions" \| "details" \| "flush" \| "padded"`	`"captions"`	Selects the card treatment supported by the layout.
`placement`	`"captions-top" \| "captions-top-reverse" \| "captions-bottom" \| "captions-bottom-reverse" \| "captions-top-alt" \| "captions-top-alt-reverse" \| "captions-bottom-alt" \| "captions-bottom-alt-reverse"`	`"captions-top"`	Controls caption placement and reversal.
`data`	[{ description?: string; imageAlt: string; imageSrc: string; title: string }, { description?: string; imageAlt: string; imageSrc: string; title: string }, { description?: string; imageAlt: string; imageSrc: string; title: string }, { description?: string; imageAlt: string; imageSrc: string; title: string }] \| { left: { description?: string; imageAlt: string; imageSrc: string; title: string }; middleImages: [{ description?: string; imageAlt: string; imageSrc: string; title: string }] \| [{ description?: string; imageAlt: string; imageSrc: string; title: string }, { description?: string; imageAlt: string; imageSrc: string; title: string }]; promo?: { dark?: boolean; description: string; title: string }; right: { description?: string; imageAlt: string; imageSrc: string; title: string } }	Built-in data for the selected layout	Replaces the image data for the selected layout variant.

BentoImageGridProps is a discriminated union. The selected variant narrows the supported style, placement, and data shape.

Bento Grids Product Grid

Edit this page Follow @shadcnlabs Join community