import { ShoppingCart } from "@/components/email/shopping-cart";
import { defaultTheme } from "@/components/email/theme-default";
export function ShoppingCartDemo() {
return (
<ShoppingCart
variant="basic"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/shopping-cart
Usage
import { ShoppingCart } from "@/components/email/shopping-cart";<ShoppingCart variant="basic" />Examples
Shopping cart with row items
Basic
The default demo above covers this original component variant.
With details
import { ShoppingCart } from "@/components/email/shopping-cart";
export function ShoppingCartWithDetailsDemo() {
return <ShoppingCart variant="with-details" />;
}Full details
import { ShoppingCart } from "@/components/email/shopping-cart";
export function ShoppingCartFullDetailsDemo() {
return <ShoppingCart variant="full-details-alt" />;
}Alternate
import { ShoppingCart } from "@/components/email/shopping-cart";
export function ShoppingCartAlternateDemo() {
return <ShoppingCart variant="basic-alt" />;
}Details alternate
import { ShoppingCart } from "@/components/email/shopping-cart";
export function ShoppingCartDetailsAlternateDemo() {
return <ShoppingCart variant="details-alt" />;
}Full details standard
import { ShoppingCart } from "@/components/email/shopping-cart";
export function ShoppingCartFullDetailsStandardDemo() {
return <ShoppingCart variant="full-details" />;
}With call to action
import { ShoppingCart } from "@/components/email/shopping-cart";
export function ShoppingCartWithCtaDemo() {
return <ShoppingCart variant="example-with-cta" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
items | Array<{ colors?: string[]; description?: string; editHref?: string; imageUrl?: string; name: string; price: string; quantity: number; size?: string }> | Built-in cart items | Supplies the cart items. |
variant | "basic" | "basic-alt" | "with-details" | "details-alt" | "full-details" | "full-details-alt" | "example-with-cta" | "basic" | Selects the cart-row detail treatment. |