shadcn.io is not affiliated with official shadcn/ui
Subscription Renewal Calendar Block for Svelte
A 60-day renewal ladder of six plans with date tiles, a Monthly and Annual price toggle that totals either way, Cancel at renewal per plan and a month of renewal dates.
Installation
Overview
Let people see what is about to renew with this subscription renewal calendar for Svelte with Ark UI. A hairline frame with a plus mark on each corner opens on a total for the plans you keep and a ToggleGroup that shows every price monthly or annual: annual plans are divided by twelve in whole cents, monthly ones multiplied. Under it a ladder lists the next 60 days from a fixed 14 October 2026, each plan with a date tile, how many days until it renews and how it is billed. An outline Button per row cancels at renewal: the row then reads "Ends Fri 23 Oct", its price is struck through, the plan leaves the total and the button becomes "Keep plan". A drawn month at the end marks each renewal with a solid dot and each ending plan with a ring. The bands are ruled by Guides. It's built from ToggleGroup, Button and Guides, with a CSS entrance only. For subscription managers, personal finance apps and any account that warns before a charge.
FAQ
How do I add my plans?
Edit PLANS: each has a name, a price in integer cents for one billing cycle, annual for yearly billing and an ISO renews date. The ladder, the days until renewal, both price bases and the totals are worked out from it.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, bucket and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.
How are the monthly and annual prices worked out?
An annual plan's monthly price is its yearly price divided by twelve and rounded to the cent; a monthly plan's annual price is twelve times its price. The total adds the rounded rows, so it always matches what you see.
What does Cancel at renewal do?
It only marks the plan in the page: the row says when it ends, the price leaves the total and the month shows a ring instead of a dot. Keep plan undoes it. The button keeps its place and size, so the list does not move.
What does the month beside the list do?
It is a drawn month, not a picker. Each date in the list is marked on it with a shape from the legend, and the marks move when the list changes. Previous and next step through the months the data covers. It is hidden from screen readers; a sentence under it says how many dates are marked, and the list holds every fact.