import { PurchasePricing } from "@/components/email/purchase-pricing";
import { defaultTheme } from "@/components/email/theme-default";
export function PurchasePricingDemo() {
return (
<PurchasePricing
plans={[
{
action: { href: "https://example.com", label: "Get lifetime access" },
name: "Lifetime access",
purchasePrice: "$149",
},
]}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/purchase-pricing
Usage
import { PurchasePricing } from "@/components/email/purchase-pricing";<PurchasePricing />Examples
2-column pricing table with gaps
The default demo above covers this original component.
Custom plans
import { PurchasePricing } from "@/components/email/purchase-pricing";
export function PurchasePricingCustomPlansDemo() {
return (
<PurchasePricing
plans={[
{
action: { href: "#", label: "Buy now" },
name: "Starter",
purchasePrice: "$99",
},
{
action: { href: "#", label: "Buy now" },
name: "Pro",
purchasePrice: "$199",
},
]}
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
plans | Array<{ name: string; leasePrice?: string; purchasePrice: string; action: { href: string; label: string } }> | Built-in plans | Configures the component's plans. |