shadcn.io is not affiliated with official shadcn/ui
Free Trial Settings Block for Radix UI
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 Radix 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.