shadcn.io is not affiliated with official shadcn/ui
Subscription Events Timeline Block for Solid
One customer's seven subscription events on a rail with a bar under each showing the monthly revenue after it, and an MRR or Total paid switch that redraws the bars from the cumulative amount charged.
Installation
Overview
See how one account's revenue moved with this subscription-events timeline for Solid with Ark UI. It is written for Billtrail, a fictional subscription-analytics tool, and follows a single customer from the first day of the trial. A hairline frame with a plus mark on each corner holds three figures (monthly revenue now, total paid and how long the customer has been with us), a switch and seven events on a rail, newest first: trial started, converted to Team, four seats added, upgraded to Business, paused, resumed and downgraded. Each row says what happened, when, and "€49 → €89 a month", with a bar under it proportional to the revenue after the event. The switch "MRR / Total paid" redraws the bars from the amount charged up to each event, prorated by the day at thirty days to the month. It is built from ToggleGroup and Guides, with CSS for the rail and the bars. For SaaS dashboards, account pages and support tools. The customer and the figures are example data.
FAQ
How do I change the events?
Edit EVENTS at the top of the file, oldest first: an id, an ISO day on, the text and mrr, the monthly revenue in integer cents after the event. A pause is an event with mrr: 0. Everything else is derived.
How is the total paid worked out?
Each event charges its monthly revenue for the days until the next event (or until AS_OF for the last), at thirty days to the month, rounded to the cent. Total paid is the sum of those charges. It is an estimate for a demo; swap chargedDuring() for your real invoices to make it exact.
What stays in the page?
Only the chosen lens. Nothing is saved or sent. To make it real, build EVENTS from your billing provider's subscription history and keep the lens as local state.
Is it accessible?
The bars are decoration: every row writes its numbers in text ("€49 → €89 a month" or "€1,112 paid up to this event"). The switch is a group of toggle buttons labelled "Bars show", and the foot is a polite status line that says what the bars now mean.