shadcn.io is not affiliated with official shadcn/ui
Churn Prevention Offer Billing Block for Vue
A cancellation save that starts from the last 90 days of use, then makes one offer: half price for three months drawn as a six-month strip with the month the full price returns, and a switch for a reminder seven days before it.
Installation
Overview
Make one honest offer before someone leaves, with this retention section for Vue with Ark UI. A compact header introduces what the team did with the plan. Inside a hairline frame with a plus mark on each corner, three figure cells show newsletters sent, subscribers added and teammates, a sentence says what the plan cost over those 90 days and what would stop first. The offer sits under a rule: half off for three months, a strip of six invoice months showing the discounted price and the month the full price returns, and a Data List of the three-month cost against the usual one. A Switch asks for a reminder seven days before the price returns and shows the date. The only Shine Button takes the offer; "No thanks" is a ghost Button. For subscription products that want a straight offer instead of a guilt trip.
FAQ
How do I fill it from my billing system?
The constants at the top hold the plan name and price in cents, the OFFER (percent and number of months), the first invoice month and the invoice day, the reminder lead time, and the FIGURES from your analytics. The offer price, the three-month cost, the month the full price returns and the reminder date are all computed from them.
How is the strip built?
Six invoice months starting from the next invoice. The first three use the offer price and are shaded, the fourth has an inset outline and says "Full price", and the rest are the usual price. Every cell holds a month name, a price and a word, so nothing depends on colour.
What does the reminder switch do?
It changes the line under it between "One email on 5 Feb" and "No reminder", so the choice and its date are clear before you accept. The switch is foreground when on, not the primary colour. In production, save the reminder with the offer and schedule the email from the same date.
What stays local?
Taking the offer writes "Offer taken in this demo" in the status line and changes the button to "Offer taken"; no coupon is applied and nothing is billed. To make it real, apply the discount to the subscription through your billing system and show its response.