shadcn.io is not affiliated with official shadcn/ui
Billing Cycle Info Billing Block for Radix UI
A 31-day billing period strip with today and the next charge marked, and a what-if toggle that re-adds two invoices, tagging each line in advance or in arrears.
Installation
Overview
Explain why a change lands on one invoice and the full price on the next, with this billing cycle panel for React with Radix UI. A strip with a cell for each of the 31 days of the period marks the days gone, today and the day of the next charge, with the three dates written under it. A Toggle Group asks what if you do nothing, add three seats today or send 400,000 extra emails, and two invoice cells re-add themselves: On your next invoice (12 Nov) and On the one after (12 Dec). Every line carries a Badge, In advance for the plan and seats and In arrears for usage and for the days of a seat added mid-period, so adding seats today shows a prorated charge on the next invoice and the full price after, while the extra emails are billed once. Shine Button follows the choice and is disabled until there is a change to schedule. The frame is ruled by Guides. It's built from Toggle Group, Badge, Shine Button and Guides, with a CSS entrance only. For subscription billing settings with seats and usage.
FAQ
How do I fill it with my plan?
Edit the constants at the top: START, NEXT and AFTER (ISO dates in UTC), PLAN, SEAT, SEATS, INCLUDED, SENT and OVER (cents per 1,000 emails over the included amount). The strip, the number of days left, the prorated seat charge and both totals are worked out from them. Replace nextEntries and afterEntries if your lines differ.
What is the difference between in advance and in arrears?
In advance means the invoice charges for the period that is about to start: the plan and the seats. In arrears means it charges for a period that has just ended: the emails sent, and the days a new seat was used before the invoice. That is why a seat added today costs a few days on the next invoice and a full month from the one after, and why extra emails appear once, on the next invoice.
How is the prorated seat charge worked out?
Seats times the seat price times the days left in the period, divided by the days in the period: three seats at $12 for 19 of 31 days is $22.06, rounded to the cent. The strip's today and the days left both come from the AS_OF date, never from the visitor's clock.
What stays local, and how do I make it real?
The buttons only answer in the page: "Scheduled in this demo" and nothing changes. To make it real, send the chosen change to your billing API, show the invoice preview it returns in the two cells instead of computing it here, and keep the button disabled while there is nothing to schedule.
How does it look on a phone?
The strip stays one row of thin cells with the three dates in three columns under it, the toggle options wrap, and the two invoice cells stack. The footer is pinned to the bottom of the screen so the schedule button is always in reach, and lines reserve two lines of detail so switching choices never moves the page.