shadcn.io is not affiliated with official shadcn/ui
Payment Schedule Calendar Block for Radix UI
Eight household bills split at a typed payday into before and after, with an auto-pay switch on each that changes the tally of what you pay by hand, and a month of due dates.
Installation
Overview
Show what a pay period will cost by hand with this payment schedule calendar for React with Radix UI. A hairline frame with a plus mark on each corner opens on two figures: what you pay by hand before payday, and what auto-pay takes, each with its bill count. Below them the bills are split at a typed payday, the 25th, into "Due before Sun 25 Oct" and "After payday", worked out from each due date against a fixed 14 October 2026. Each row has a date tile, the bill, an amount, a glyph and a word for its state (paid, due in 3 days, overdue by 4 days) and a Switch for auto-pay. Turning a switch on or off changes the tally at once and says so in a polite status line. A drawn month at the end of the frame marks each due date by whether it is paid, on auto-pay or by hand, with the payday marked too. It isn't a year of instalments, only the bills of this pay period. The bands are ruled by Guides. It's built from Switch, Button and Guides, with a CSS entrance only. For household budgeting apps, bill trackers and any app that plans around a payday.
FAQ
How do I change the bills and the payday?
Edit BILLS: each has a name, an ISO due date, an amount in integer cents and a paidOn date when it is settled. PAYDAY is the typed split date and START_AUTO lists the bills that begin on auto-pay. The groups, the tally and the month are worked out from those.
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.
What does the tally count?
Only bills that are unpaid and fall before the payday. Those on auto-pay add to what auto-pay takes, the others to what you pay by hand. Paid bills are left out, and their switches are off and locked.
How are paid, due and overdue shown without color?
Each row has a glyph and a word: a check and "Paid 12 Oct", a clock and "Due in 3 days", an alert and "Overdue by 4 days". Only the overdue glyph carries the destructive token; the words are in the normal text color.
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.