import { ProductImagesFeature } from "@/components/email/product-images-feature";
import { defaultTheme } from "@/components/email/theme-default";
export function ProductImagesFeatureDemo() {
return (
<ProductImagesFeature
placement="right"
presentation="logo"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/product-images-feature
Usage
import { ProductImagesFeature } from "@/components/email/product-images-feature";<ProductImagesFeature placement="right" />Examples
Feature with multiple product images
logo left
import { ProductImagesFeature } from "@/components/email/product-images-feature";
export function ProductImagesFeaturePresentationLogoPlacementLeftExampleDemo() {
return <ProductImagesFeature presentation="logo" placement="left" />;
}logo right
import { ProductImagesFeature } from "@/components/email/product-images-feature";
export function ProductImagesFeaturePresentationLogoPlacementRightExampleDemo() {
return <ProductImagesFeature presentation="logo" placement="right" />;
}images left
import { ProductImagesFeature } from "@/components/email/product-images-feature";
export function ProductImagesFeaturePresentationImagesPlacementLeftExampleDemo() {
return <ProductImagesFeature presentation="images" placement="left" />;
}images right
import { ProductImagesFeature } from "@/components/email/product-images-feature";
export function ProductImagesFeaturePresentationImagesPlacementRightExampleDemo() {
return <ProductImagesFeature presentation="images" placement="right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | - | Configures the component's heading. |
body | string | - | Configures the component's body. |
images | Array<{ src: string; alt?: string }> | - | Configures the component's images. |
logo | { src: string; alt?: string } | - | Configures the component's logo. |
action | { href: string; label: string; iconSrc?: string } | - | Configures the component's action. |
placement | "left" | "right" | "right" | Configures the component's placement. |
presentation | "images" | "logo" | "images" | Selects the image collage or logo composition. |