shadcn.io is not affiliated with official shadcn/ui
Seasonal Pause Subscription Billing Block for Svelte
A twelve-month grid where each month toggles between billed and paused, with the plan's limits of three months in a row and four in a year enforced, the months billed, the price against a full year and the month billing resumes worked out as you press.
Installation
Overview
Let customers skip the months they will not use, with this seasonal pause for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds twelve month cells on shared hairlines, November to October, each a native toggle button that reads Billed or Paused and turns to solid foreground when it is paused. A refusal names the rule it hit, three months in a row or four in the year, and leaves the grid as it was. Under the grid a description list works out the months billed, what you pay against a full year and the month billing resumes, beside a list of the paused stretches. The foot holds a Shine Button, the only colored control, that saves the schedule, and an outline Discard that puts back the saved one. For booking apps, clubs, gardens, schools and any subscription that sleeps for part of the year.
FAQ
How do I fill it from my billing provider?
Edit the constants at the top of the file. MONTHS lists the months of the schedule with the year of each, SAVED holds the indexes already paused, MONTHLY is a month's price in cents, and MAX_RUN and MAX_YEAR are the plan's two limits. Everything shown is derived from those: the count, the price, the stretches and the resume month are never typed twice. Replace the save handler with a call that stores the paused months.
What happens when a month would break a rule?
Nothing changes in the grid. The line under it says which rule was hit and by how much ("Pausing Sep 2027 would make 4 months in a row. The plan allows 3."), a short version goes to the status line in the foot, and the button keeps its place. Switching a paused month back to billed is always allowed. Keep the same checks on your server, since the page can be bypassed.
How is the resume month chosen?
It is the first billed month after the first paused stretch, shown as the first of that month. If the stretch runs to the end of the schedule, it is the month after the grid. With nothing paused the line reads "Billing every month". Several stretches are all listed under "Paused stretches", each as a range.
What stays local in the demo, and how do I wire it?
Save pause schedule keeps the months in the page and says "Saved in this demo." Nothing is sent, scheduled or charged, and a reload restores the pause the account started with. In your app, post the paused months to your billing provider in save, show its refusal in the line under the grid if it rejects them, and only then update the saved schedule.
Is it accessible from the keyboard?
Every month is a button in the tab order with a pressed state, so a screen reader hears "Jun 2027, toggle button, pressed". The grid is a list named "Months to pause", Space or Enter flips a month, and the results are in a description list. Save and Discard stay on screen and answer when there is nothing to save. A polite status line reports each refusal, save and discard.