Billing Churn Prevention Offer
A retention prompt for the cancellation flow, showing a discounted price against the original, a short list of features the customer would keep, and two actions: claim the offer or continue canceling. Meant to sit as the first step of a cancel flow, before the actual cancellation confirmation.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-churn-prevention-offer.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing34.tsx instead.
Usage
The file also exports billing34Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing34, billing34Demo } from "@/components/blocks/billing/billing34"; export default function Page() { return <Billing34 {...billing34Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Limited-time offer" | Small badge text above the heading. |
| heading | string | none | Main offer heading. |
| description | string | none | Supporting text under the heading. |
| originalPrice | string | none | Preformatted original price, shown struck through next to the discounted price. |
| discountedPrice | string | none | Preformatted discounted price, shown large and first. |
| priceSuffix | string | "/mo" | Text appended after the discounted price, such as a billing period. |
| expiresLabel | string | none | Optional line under the price for an expiration note, omitted if not passed. |
| features | string[] | none | Feature strings listed with check icons, meant to reinforce what the customer keeps. |
| claimLabel | string | "Claim this offer" | Label for the primary action. |
| claimHref | string | none | Destination for the claim action, rendered as a next/link. |
| declineLabel | string | "No thanks, continue to cancel" | Label for the secondary action. |
| declineHref | string | none | Destination for the decline action, rendered as a next/link. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- Both the claim and decline actions render as next/link, not buttons with onClick handlers, so wiring either one to apply a coupon or proceed with cancellation happens at the route or handler they point to.
- The discount amount isn't computed by the component; originalPrice and discountedPrice are independent strings you calculate and format yourself.
- expiresLabel is entirely optional and the layout doesn't reserve space for it, so omitting it just removes that line rather than leaving a gap.
- The feature list has no built-in limit, but it's designed for a short, high-value set of items rather than a full feature comparison table.
- There's no countdown timer or animation built in; the eyebrow badge and expiresLabel text are the only urgency cues.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.