shadcn.io is not affiliated with official shadcn/ui
Trial Expiring Notification Block for React
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 React with Base 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.
Related
- Pro
Trial Banner Billing
Upsell and retentionA trial-ending banner for an app's shell: days left in the heading, a progress bar, what changes when the trial ends, an Add payment method action and a dismiss that remembers.
- 120Pro
System Alerts by Severity Notification
Incidents and alertsAn infrastructure monitor's alert panel: a count of open alerts by severity, and an accordion of three systems with their facts, an Acknowledge and a one-hour Mute that says when it ends.
- Pro
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.
- Pro
A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.
- Pro
Alert Banner Notification
Incidents and alertsAn operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.
- Pro
Announcement Notification
Floating cardsA what's new card for a product analytics app: three updates in a carousel with Previous, Next and the place in words, a Don't show this again box, and a Dismiss that folds the card.