shadcn.io is not affiliated with official shadcn/ui
Household Bills Todo List Block for Ark UI
A bills checklist in four sections with amounts in pounds, auto-pay rows that settle themselves on their date, manual rows you tick to paid, and totals for paid so far and due by the end of the week.
Installation
Overview
Keep a month of bills in one place, with this household finance to-do list block for React with Ark UI. Four sections (bills due, investments, tax prep and reviews) list ten items, each with an amount in pounds and a due date worked out from a fixed day. Auto-pay rows are paid by their date and cannot be ticked by hand: they show a clock until the day and a check after it, and the line under the title says "Auto-pay on Thu 15 Oct". Manual rows carry a Checkbox that you tick when the bill is paid; an unpaid bill past its date reads "Overdue 1 day" with an alert glyph and a heavier weight. The top band adds it up with three figures: paid so far, due by the end of the week, and the month's total. Guides rule the bands, and on a phone the amount moves under the title. For budgeting apps, household dashboards and bill reminders.
FAQ
Why can't I tick an auto-pay bill?
Because the schedule pays it, not you. An auto-pay row counts as paid once its date is on or before the fixed "today" of the demo, and until then it shows a clock and the date it will go out. The rule is one function, paidOf, so changing it to read your payment data changes the whole block.
How are the totals worked out?
Every amount is stored in whole pence, so the sums are exact. Paid so far adds the paid rows, "Due by Sun 18 Oct" adds the unpaid rows due on or before that Sunday (overdue ones included), and the total adds everything. Pounds are formatted without Intl, so server and browser print the same text.
How does overdue show without colour?
As a word, a glyph and a weight: "Overdue 1 day", an alert icon in the text colour and medium-weight text. No red or amber is used, so the state reads the same in every theme and to every reader.