shadcn.io is not affiliated with official shadcn/ui
Yearly Savings Toggle Billing Block for Svelte
When yearly billing pays off: a Billed yearly switch and a cumulative cash line over 12 months, monthly as a staircase against one yearly step, with the break-even month and the saving derived from the two prices.
Installation
Overview
Answer the question behind every yearly toggle, how long until it pays off, with this billing cycle preview for Svelte with Ark UI. A compact header states both prices and holds a Switch, "Billed yearly". Inside a hairline frame with a plus mark on each corner, a hand-built figure draws the cumulative cost over 12 months: monthly billing as a staircase of equal steps and yearly as one step on day one. The switch makes your line solid and the other dotted, and a marker shows where the two meet. A headline says what yearly saves over the 12 months, a sentence gives the break-even month and the refund rule, and the only Shine Button, "Switch to yearly", sits in a foot with a status line. The break-even month and the saving are derived from the two prices. It's built from Switch, Shine Button and Guides, with an SVG figure and a CSS entrance only. For pricing settings, plan pages and renewal flows.
FAQ
How do I change the prices?
Edit MONTHLY_CENTS and YEARLY_CENTS at the top of the file, in cents, and REFUND_DAYS for the refund rule. The staircase, the yearly step, the break-even month, the number of free months and the saving are all derived from them, so a different discount needs no other change.
What does pays off from month 10 mean?
Monthly billing charges at the start of each month. By the 10th payment it has cost the same as the yearly price, and from the next one it costs more, so yearly is never worse from then on and the last months of the year are free. The marker on the figure sits at that payment, and the sentence under it says what monthly billing has cost by then.
Is the figure accessible?
The drawing is hidden from assistive technology and the same facts are in text: the headline, the legend with both 12 month totals, the break-even sentence, and a table of the cumulative cost at the end of each month for both billing cycles, available to screen readers inside the figure. The two lines also differ by style, solid against dotted, not only by position.
What does Switch to yearly do?
With the switch off it explains, in the status line, that the switch must be turned on first; with it on, it only says that billing changes at the next renewal in your app and that nothing changed here. In your app send the choice to your server in choose, change the plan at the renewal, and show the server's answer in the same status line. The button is aria-disabled rather than disabled so it stays focusable.