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.

Masonry Grid

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

React Email MJML React JSX Email

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

export function MasonryImageGridDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="left"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/react-email/masonry-image-grid

Usage

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

<MasonryImageGrid columns={2} stackPosition="left" />

Examples

2-column masonry image grid with 3 images

left

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns2StackPositionLeftExampleDemo() {
  return <MasonryImageGrid columns={2} stackPosition="left" />;
}

left overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns2StackPositionLeftOverlayReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="left"
      overlay={true}
      reverse={false}
    />
  );
}

right

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns2StackPositionRightOverlayFalseReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="right"
      overlay={false}
      reverse={false}
    />
  );
}

right overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns2StackPositionRightOverlayReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="right"
      overlay={true}
      reverse={false}
    />
  );
}

2-column masonry image grid with 4 images

left

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionLeftOverlayFalseReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="left"
      overlay={false}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

left reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionLeftOverlayFalseReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="left"
      overlay={false}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

left overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionLeftOverlayReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="left"
      overlay={true}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

left overlay reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionLeftOverlayReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="left"
      overlay={true}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionRightOverlayFalseReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="right"
      overlay={false}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionRightOverlayFalseReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="right"
      overlay={false}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionRightOverlayReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="right"
      overlay={true}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right overlay reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns2StackPositionRightOverlayReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={2}
      stackPosition="right"
      overlay={true}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

3-column masonry image grid

left

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns3StackPositionLeftOverlayFalseReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="left"
      overlay={false}
      reverse={false}
    />
  );
}

left overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns3StackPositionLeftOverlayReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="left"
      overlay={true}
      reverse={false}
    />
  );
}

right

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns3StackPositionRightOverlayFalseReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="right"
      overlay={false}
      reverse={false}
    />
  );
}

right overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";

export function MasonryImageGridColumns3StackPositionRightOverlayReverseFalseExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="right"
      overlay={true}
      reverse={false}
    />
  );
}

3-column masonry image grid with full-width feature

left

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionLeftOverlayFalseReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="left"
      overlay={false}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

left reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionLeftOverlayFalseReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="left"
      overlay={false}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

left overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionLeftOverlayReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="left"
      overlay={true}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

left overlay reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionLeftOverlayReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="left"
      overlay={true}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionRightOverlayFalseReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="right"
      overlay={false}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionRightOverlayFalseReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="right"
      overlay={false}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right overlay

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionRightOverlayReverseFalseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="right"
      overlay={true}
      reverse={false}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

right overlay reverse

import { MasonryImageGrid } from "@/components/email/masonry-image-grid";
import { emailAsset } from "@/components/email/email-assets";

export function MasonryImageGridColumns3StackPositionRightOverlayReverseFeatureExampleDemo() {
  return (
    <MasonryImageGrid
      columns={3}
      stackPosition="right"
      overlay={true}
      reverse={true}
      feature={{
        alt: "Featured collection",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`images`	`Array<{ src: string; alt?: string; href?: string; heading?: string; subtext?: string }>`	-	Configures the component's images.
`feature`	`{ src: string; alt?: string; href?: string; heading?: string; subtext?: string }`	-	Configures the component's feature.
`columns`	`2 \| 3`	`2`	Configures the component's columns.
`stackPosition`	`"left" \| "right"`	`"left"`	Configures the component's stackposition.
`reverse`	`boolean`	`false`	Configures the component's reverse.
`overlay`	`boolean`	`false`	Configures the component's overlay.

Featured Grid Full Width

Edit this page Follow @shadcnlabs Join community