Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProMarketing pricing tiers with a monthly and yearly switch, rolling prices, a featured plan and included or excluded features.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
price.yearly is the effective monthly price when billed yearly; the card shows the annual total under it. Use price: null for a "Custom" tier.
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PricingPlan[] | - | Plans, left to right. Two to four read best. |
cycle | "monthly" | "yearly" | - | Billing cycle when controlled. |
defaultCycle | "monthly" | "yearly" | "monthly" | Billing cycle on first render when uncontrolled. |
onCycleChange | (cycle) => void | - | Called when the visitor switches cycle. |
currency | string | "USD" | ISO 4217 currency code. |
locale | string | "en-US" | Number formatting locale, fixed so SSR output matches. |
yearlyBadge | string | - | Pill next to the yearly option, such as "Save 20%". |
cycleLabel | string | "Billing cycle" | Accessible name of the switch. |
hideCycleSwitch | boolean | false | Hide the switch, for example when you control it elsewhere. |
| Field | Type | Description |
|---|---|---|
id | string | Stable key. |
name | string | Plan name; labels the plan's article. |
description | string | One line under the name. |
price | { monthly: number; yearly: number } | null | Monthly price per cycle, or null for custom. |
customPriceLabel | string | Replaces "Custom". |
features | (string | { label; included?: boolean })[] | Feature bullets. included: false shows a dash. |
cta | { label: string; href?: string; onClick?() } | Button, or link when href is set. |
featured | boolean | Ring, glow and lift. |
badge | string | Pill above a featured plan. |
article labelled by its name. Prices have a plain-text copy for screen readers, while the rolling digits are hidden from them, and a polite live region announces the cycle change.