shadcn.io is not affiliated with official shadcn/ui
Trial Expiring Notification Block for Vue
A sprint planning service's trial-ending notice: a strip of 14 day cells with today ringed, a Keep Pro or Move to Free choice that diffs six features, and a one-time seven-day extension.
Installation
Overview
Show what a trial running out costs before anyone has to decide with this trial notice for Vue with Ark UI. It is Sprintkit, a sprint planning service, in a hairline frame with plus marks at its corners. The first band is a strip of day cells in rows of seven: the days used in a tint, today ringed, the days to go outlined, and a last row of extra days. The second band is a Toggle Group, Keep Pro or Move to Free, over a diff of six features: what you keep has a plus, what you lose has a minus, and each says "Keep" or "Lose" in words with the old and new value. Choose a plan is the one Shine Button; Extend 7 days adds a week once. For trial banners, upgrade prompts and any plan that downgrades on a date.
FAQ
How do I use my own trial?
Edit STARTED (day 1, in UTC), TODAY (today's number in the trial), TRIAL_DAYS, EXTRA_DAYS and FEATURES (name, Pro value, Free value). Every date, the days to go and the kept and lost counts are worked out from them.
How are the cells told apart without colour?
Used days are a pale tint, today is solid with a ring around it, days to go are outlined, and the extension is a quiet fill. Each cell also has a screen reader description ("Day 12, Oct 19, to go"), and the caption says which day is today and when the trial ends.
How does the diff work?
A feature with the same value on both plans is always kept; one that differs is lost on Free and shows "Unlimited to 3". Keep Pro keeps everything. The toggle group always has one choice pressed, and the list keeps its six rows either way.
What stays local, and how do I wire it for real?
Choose a plan only notes the choice in the status line, and Extend 7 days moves the end date and the strip in this page, once. In your app open checkout from choose and ask your server for the extension in extend, then redraw from the trial it returns.