shadcn.io is not affiliated with official shadcn/ui
Pricing With Guarantee Block for React
A free trial with a refund window drawn as a timeline: today, day 12, day 14 and day 30 on one line, beside the yearly plan, its price and call to action. It turns vertical on a phone.
Installation
Overview
Answer "what happens after I start?" before it's asked with this pricing section for a free trial with a refund window. The feature is a timeline of four nodes on one line: today, with full access; day 12, with a reminder email; day 14, with the first charge; and day 30, when the refund window ends. The trial's stretch is drawn in a solid foreground line and the refund window after it in the border colour, the turning points have filled nodes, and each node has its day at display size, a short title and one sentence. Beside it the one yearly plan of a meditation app: $69.99 a year (and what that is a month), the block's one primary Shine Button and five features. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top, and the band ruled with a + at each corner. Built with Shine Button, Guides and Lucide icons, as a static server component with CSS transitions only. For subscriptions with a trial, annual plans and any product where the first charge worries buyers.
FAQ
How do I change the timeline's steps and days?
Edit STEPS at the top of the file. Each step has its day label, a title, one sentence of text, key (a filled node, for the turning points) and phase: trial draws the line after the step solid, refund draws it in the border colour. TRIAL_DAYS and REFUND_DAYS feed the headline, the button, the first charge's sentence and the footnote; the labels "Day 12" and the reminder text are plain strings, so edit them when the days change. Add or remove steps and change lg:grid-cols-4 to match.
What should I check before I publish the timeline?
That every step is true to the day. The reminder email must really go out, the first charge must be on the day shown, and the refund window must run as long as the page says; here it runs 30 days from the day the trial starts, so it ends 16 days after the first charge, and the footnote says so. Link your full terms from the footer or checkout, and show the price in the buyer's currency if you sell abroad.
How do I connect the button to checkout?
The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at a checkout that starts the free trial and collects the payment method, and charge on day 14 on your server.
Is the timeline accessible?
It's an ordered list: each step is one item, read in order as its day, its title and its sentence ("Day 14, First charge, $69.99 for the year, if you stay"). The nodes and the line between them are decoration and hidden from assistive technology, so nothing depends on seeing the line or telling a filled node from an empty one. The price is read as "$69.99 per year".
How does it look on a phone?
Below lg the plan and its button come first, then the timeline turns vertical: the nodes down the left edge (the right in RTL) joined by a line, each step's day, title and sentence beside its node. The first screen holds the headline, the price and the button, and nothing scrolls sideways. From lg the timeline sits on the left and the plan on the right, with the four steps side by side.
When does a timeline beat a guarantee badge?
When the worry is about what happens, not about whether you can leave: a trial that turns into a charge, an annual plan billed once. A badge says "30-day guarantee"; the timeline shows the day you'll be charged, the day we remind you and the day it's too late to ask. If your risk-free window is the whole pitch, use the guarantee hero instead.
Related
- 30Pro
Money Back Hero Pricing
Proof and guaranteesOne plan sold on its guarantee: an oversized 30-day seal, its promise written round the edge, beside the plan's price, features and call to action.
- Pro
Payment Schedule Pricing
Billing switchesTuition paid once or in 3, 6 or 12 installments: four chips pick the schedule and a calendar of twelve monthly cells fills with the dated payments and their amounts, over the total and the call to action.
- %%Pro
Timeline Tiers Pricing
Discounts and offersTenure discounts for a managed hosting plan on a vertical timeline beside a headline and a call to action that stay in view: each stop from day one to year five shows its discount, the price it brings and what it unlocks.
- Pro
Minimal Single Plan Pricing
Single planThe quietest single plan: one card in a card with a launch price beside the struck-out regular price, one call to action and six included features, under a short centred header.
- Pro
Free vs Pro Pricing
Single planOne card with a big Free and Pro switch: flipping it rolls the price and turns the locks on Pro's features into checks, in a single list of eight.
- Pro
Pricing With FAQ
Proof and guaranteesPlans answered by the pricing FAQ for an e-commerce builder: a compact plan list, a row each with its name, price and call to action, beside an accordion of six questions with the first one open, in one ruled band.