A collection of beautifully designed, accessible, and customizable email components. Built on React 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.

Two Columns Image Grid with Full Width Feature

Two Columns Image Grid with Full Width Feature — Product Detail email component.

React Email MJML React JSX Email

Installation


$ pnpm dlx shadcn@latest add @emailcn/2-columns-image-grid-with-full-width-feature

Usage

import { TwoColumnsImageGridWithFullWidthFeature } from "@/components/emails/ecommerce/product-detail/two-columns-image-grid-with-full-width-feature";

<TwoColumnsImageGridWithFullWidthFeature
  {...TwoColumnsImageGridWithFullWidthFeature.PreviewProps}
/>

API Reference

Prop	Type	Default	Description
`productImageUrl`	`string`	-	Product image URL
`productName`	`string`	-	Product name
`productDescription`	`string`	-	Product description
`price`	`string`	-	Product price
`ctaLabel`	`string`	-	CTA button label
`ctaHref`	`string`	`"#"`	CTA button link
`theme`	`EmailTheme`	`defaultTheme`	Email theme styling

Feature with Product Image Bento Grid with Images and Details

On This Page

Installation Usage API Reference

Edit this page Follow @shadcnlabs Join community