shadcn.io is not affiliated with official shadcn/ui
Event Planning Todo List Block for React Aria
An event checklist in five sections where each item has a cost, a vendor and a status, booked costs count against an editable budget in words, and an aside counts the days to the event.
Installation
Overview
Plan a small event against a number, with this event planning to-do list block for React with React Aria. Five sections (venue, catering, entertainment, logistics and marketing) list ten items, each with a cost in pounds, a vendor shown as initials in an Avatar and a Native Select with Not started, In progress and Booked. Only booked costs count as committed, per section and in total, and the aside says where that leaves the budget in words ("£3,480 remaining" or "Over by £250") beside a Progress bar. The budget is a plain field you can change; a value that is not whole pounds shows a message and keeps the last good figure. The countdown reads "38 days" to a fixed event date. Guides rule the bands and the divider. Example figures only, not advice. For event tools, venue booking and planners.
FAQ
What counts as committed?
Only items set to Booked. In progress and Not started items show their cost but stay out of the committed total, so the "remaining" or "Over by" line moves the moment you book something.
What can I type in the budget field?
Whole pounds, up to seven digits; commas are ignored. Anything else shows "Enter the budget in whole pounds." and the figures keep using the last valid budget. Costs are stored in pence, so the totals are exact.
Where does the countdown come from?
From a fixed event date and a fixed "today", subtracted as day numbers. Nothing reads the clock; pass your real dates in.