import { BlogGrid } from "@/components/email/blog-grid";
import { defaultTheme } from "@/components/email/theme-default";
export function BlogGridDemo() {
return (
<BlogGrid
content="image"
masonry={false}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/blog-grid
Usage
import { BlogGrid } from "@/components/email/blog-grid";<BlogGrid content="image" masonry={false} />Examples
2-column blog with images
default
import { BlogGrid } from "@/components/email/blog-grid";
export function BlogGridContentImageMasonryFalseExampleDemo() {
return <BlogGrid content="image" masonry={false} />;
}2-column blog with images and text
default
import { BlogGrid } from "@/components/email/blog-grid";
export function BlogGridMasonryFalseContentImageTextExampleDemo() {
return <BlogGrid masonry={false} content="image-text" />;
}2-column blog with images and boxed content
default
import { BlogGrid } from "@/components/email/blog-grid";
export function BlogGridMasonryFalseContentBoxedExampleDemo() {
return <BlogGrid masonry={false} content="boxed" />;
}Blog with images and 2-column masonry
default
import { BlogGrid } from "@/components/email/blog-grid";
export function BlogGridMasonryContentImageExampleDemo() {
return <BlogGrid masonry content="image" />;
}2-column masonry blog with boxed content
default
import { BlogGrid } from "@/components/email/blog-grid";
export function BlogGridMasonryContentBoxedExampleDemo() {
return <BlogGrid masonry content="boxed" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | - | Configures the component's heading. |
posts | Array<{ title: string; excerpt?: string; image?: { alt?: string; src: string }; author?: string; badge?: string; date?: string; month?: string; episode?: string; host?: string }> | - | Configures the component's posts. |
masonry | boolean | false | Uses the masonry layout. |
content | "image" | "image-text" | "boxed" | "image" | Selects the post-card treatment. |