import { SubscriptionPricing } from "@/components/email/subscription-pricing";
import { defaultTheme } from "@/components/email/theme-default";
export function SubscriptionPricingDemo() {
return (
<SubscriptionPricing
columns={2}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/subscription-pricing
Usage
import { SubscriptionPricing } from "@/components/email/subscription-pricing";<SubscriptionPricing columns={2} />Examples
2-column pricing table
The default demo above covers this original component.
Full-width single pricing
Single plan
import { SubscriptionPricing } from "@/components/email/subscription-pricing";
export function SubscriptionPricingSinglePlanDemo() {
return <SubscriptionPricing columns={1} />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
plans | Array<{ name: string; description?: string; price: string; currency?: string; period?: string; features?: Array<{ label: string; muted?: boolean }>; action: { href: string; label: string } }> | Built-in plans | Configures the component's plans. |
columns | 1 | 2 | 2 | Configures the component's columns. |