import { ProductList } from "@/components/email/product-list";
import { defaultTheme } from "@/components/email/theme-default";
export function ProductListDemo() {
return (
<ProductList
variant="basic"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/product-list
Usage
import { ProductList } from "@/components/email/product-list";<ProductList variant="basic" />Examples
Product list with rows
Basic
The default demo above covers this original component variant.
With descriptions
import { ProductList } from "@/components/email/product-list";
export function ProductListWithDescriptionsDemo() {
return <ProductList variant="with-description" />;
}Full details
import { ProductList } from "@/components/email/product-list";
export function ProductListFullDetailsDemo() {
return <ProductList variant="full-details" />;
}Reviews at the top
import { ProductList } from "@/components/email/product-list";
export function ProductListReviewsAtTopDemo() {
return <ProductList variant="reviews-top" />;
}With intro
import { ProductList } from "@/components/email/product-list";
export function ProductListWithIntroDemo() {
return <ProductList variant="with-intro" />;
}With details
import { ProductList } from "@/components/email/product-list";
export function ProductListWithDetailsDemo() {
return <ProductList variant="with-details" />;
}Details with reviews at the top
import { ProductList } from "@/components/email/product-list";
export function ProductListDetailsReviewsAtTopDemo() {
return <ProductList variant="details-reviews-top" />;
}Full details with reviews at the top
import { ProductList } from "@/components/email/product-list";
export function ProductListFullReviewsAtTopDemo() {
return <ProductList variant="full-reviews-top" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
products | Array<{ imageUrl?: string; name: string; price: string; quantity?: number; description?: string; details?: string; reviewCount?: number; href?: string }> | Built-in products | Supplies the products displayed in rows. |
variant | "basic" | "reviews-top" | "with-description" | "with-intro" | "with-details" | "details-reviews-top" | "full-details" | "full-reviews-top" | "basic" | Selects the product-row detail treatment. |