shadcn.io is not affiliated with official shadcn/ui
Custom Billing Cycle Billing Block for React
Align invoices to a fiscal year: pick the month it starts in and monthly, quarterly or annual invoicing, see every invoice date on a twelve-month ribbon with the short first period shaded, and read what that period costs prorated by the day.
Installation
Overview
Let accountants invoice on their own calendar, with this billing cycle section for React with Base UI. A compact header says when the account is billed today. Inside a hairline frame with a plus mark on each corner, a Native Select sets the month the fiscal year starts in and a Segment Group chooses monthly, quarterly or annual invoices. A ribbon of twelve month cells marks every invoice date in solid foreground and shades the short first period before the first one, a sentence names the dates ("Your quarters start 1 Apr: invoices land 1 Apr, 1 Jul, 1 Oct, 1 Jan"), and a Data List works out that first period in days and cents, the full invoices after it and what is billed in the twelve months. The only Shine Button, "Align to my fiscal year", schedules the change. On a phone the ribbon wraps into two rows of six. For finance tools, bookkeeping and subscription products sold to organisations with a fiscal year.
FAQ
How do I fill it from my billing system?
The constants at the top hold the account: AS_OF (the date the demo treats as today), PLAN (a name and monthlyCents) and CURRENT, the sentence about today's cycle. The fiscal starts and frequencies are the STARTS and FREQUENCIES lists. The ribbon, the invoice dates, the length of the short first period and every amount are derived from them in whole cents with UTC date arithmetic, so the same dates appear in every time zone.
How is the short first period priced?
From the day the change starts to the day before the first invoice date, at the plan's yearly price spread over 365 days, rounded to the cent. Invoices after it are the plan's monthly price times the months in the period. The "billed in these twelve months" row adds the short charge to the full invoices that fall on the ribbon, so an annual choice shows two charges: the short period and one yearly invoice. Swap the rule for your provider's proration if it differs.
What stays local?
Pressing the button only writes a line in the status region, "Scheduled in this demo", and nothing is changed or charged. To make it real, send the fiscal start month and the frequency to your billing system's subscription schedule or billing-anchor call, and show the dates it returns rather than the ones computed here.
How does the ribbon stay readable without colour?
An invoice month is a solid foreground cell with its date, "1 Jan", and hidden text reading "Invoice on"; months in the short first period are shaded and carry hidden text saying so. The legend above repeats both marks as words. The ribbon is a list of twelve months in order, so a screen reader hears each month with its state.