import { ImageGrid } from "@/components/email/image-grid";
import { defaultTheme } from "@/components/email/theme-default";
export function ImageGridDemo() {
return (
<ImageGrid
columns={2}
aspect="square"
overlay={false}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/image-grid
Usage
import { ImageGrid } from "@/components/email/image-grid";<ImageGrid columns={2} aspect="square" overlay={false} />Examples
2-column image grid
square
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns2AspectSquareOverlayFalseExampleDemo() {
return <ImageGrid columns={2} aspect="square" overlay={false} />;
}square overlay
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns2AspectSquareOverlayExampleDemo() {
return <ImageGrid columns={2} aspect="square" overlay={true} />;
}portrait
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns2AspectPortraitOverlayFalseExampleDemo() {
return <ImageGrid columns={2} aspect="portrait" overlay={false} />;
}portrait overlay
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns2AspectPortraitOverlayExampleDemo() {
return <ImageGrid columns={2} aspect="portrait" overlay={true} />;
}3-column image grid
square
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns3AspectSquareOverlayFalseExampleDemo() {
return <ImageGrid columns={3} aspect="square" overlay={false} />;
}square overlay
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns3AspectSquareOverlayExampleDemo() {
return <ImageGrid columns={3} aspect="square" overlay={true} />;
}portrait
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns3AspectPortraitOverlayFalseExampleDemo() {
return <ImageGrid columns={3} aspect="portrait" overlay={false} />;
}portrait overlay
import { ImageGrid } from "@/components/email/image-grid";
export function ImageGridColumns3AspectPortraitOverlayExampleDemo() {
return <ImageGrid columns={3} aspect="portrait" overlay={true} />;
}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. |
columns | 2 | 3 | 2 | Configures the component's columns. |
aspect | "square" | "portrait" | "square" | Configures the component's aspect. |
overlay | boolean | false | Configures the component's overlay. |