Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Household Bills Todo List Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a month of bills in one place, with this household finance to-do list block for React with React Aria. 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.

What stays local, and how do I save for real?

The ticks live in the page and reset on reload, and the figures are example figures, not advice. Write each change from the toggle handler to your own store, and replace START with the bills you load.

How does it look on a phone?

The bands stack, the amount drops into the line under each title and the sections keep their order. Nothing scrolls sideways, and the totals sit in one column above the sections.

All 100 todo list blocks