shadcn.io is not affiliated with official shadcn/ui
Free Trial Settings Block for React
A free trial panel with a 7, 14 or 30 day length over a drawn timeline whose reminders and end date move with it, a card requirement, what happens when a trial ends, and the features the trial includes.
Installation
Overview
Decide how long a trial runs and what it turns into, and see the dates it makes, with this free trial panel for React with Base UI. Inside a hairline frame with a plus mark on each corner, a Segment Group picks the length (7, 14 or 30 days). A drawn timeline shows the start, a reminder three days before the end, another one day before, and the end, and the markers slide as the length changes; under it four cells on shared hairlines give each marker's day and its date for a trial that starts on a fixed sample day. The next band has a Switch that asks for a card up front (and then says the trial converts on its last day and the card is charged) and a Radio Group for what a trial without a card turns into: downgrade to Free, pause the workspace or ask to pick a plan. The last band is four Checkbox rows for the features the trial includes, with a count and "Locked during the trial" on each one left out. A status line counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Segment Group, Switch, Radio Group, Checkbox, Button, Shine Button and Guides, with a CSS entrance only. For subscription apps, coaching and course products and any service that lets people try before they pay.
FAQ
How do I change the lengths, the reminders or the features?
LENGTHS lists the trial lengths in days, markersOf builds the four markers (the start, the end and two reminders placed relative to the end), FEATURES lists the features with a hint each and ENDINGS the choices for a trial without a card. The dates come from START, a fixed ISO day, with Date.UTC arithmetic, so they are the same on every load.
Why are the reminders at three days and one day?
They are three days and one day before the end, counted from the length you pick, so a 7-day trial reminds on day 4 and day 6 and a 30-day trial on day 27 and day 29. The markers are positioned as a share of the length, in a left-to-right box so the line reads the same in a right-to-left page, and the four cells under it carry the same facts as text.
What does requiring a card change?
The sentence under the choices. With the switch on, it says the trial converts to the paid plan on its last day, with the date, and charges the card unless the trial is cancelled first. With it off, it says no card is asked for and what the chosen ending does on the last day. The ending choices stay available either way so the saved setting is never lost.
What stays local, and how do I wire it for real?
Everything: nobody is signed up and nothing is charged. Save keeps the settings in this page and says so. To make it real, store them with the plan, start a trial record when someone signs up, schedule the reminder emails from its end date, and run the chosen ending from the job that closes trials.
How is it labelled by keyboard and screen reader?
The length group is named by its heading and moves with the arrow keys, the timeline is decorative with one sentence in text for a screen reader and the four cells as an ordered list, and each feature box is named by the feature and described by its hint. The status line is a polite live region present from the start, and Save and Discard stay focusable while nothing changed.
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.
- 9Pro
Trial Pace Onboarding
Milestones and recapsA time-tracking app's trial panel: days remaining counted from a fixed date, three limit meters each with a tick for an even pace, a worked-out line on when each limit would run out, and a ghost button that asks for 7 more days.
- Pro
An upgrade prompt panel where an admin picks when a prompt shows, how often, its style and its message, beside a drawn app row with a locked item that wears the chosen style.
- Pro
Access Token Hygiene Settings
Sign-in and securityAn access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.
- Pro
Account Deletion Settings
Backups and exportsA whole-page account deletion that first asks what happens to each kind of data (delete, anonymise or transfer, with invoices locked for tax law), sums the choices in one sentence, then schedules deletion 14 days out behind a typed-email alert dialog.
- Pro
Alert Rules Settings
Alerts and auditAn alert rules panel where each rule is a sentence you edit in place with menus and a number field, beside a framed chart of its metric with the threshold line and a computed count of how often it would have fired.