Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Event Planning Todo List Block for Radix UI

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.

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

Plan a small event against a number, with this event planning to-do list block for React with Radix UI. 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.

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

Statuses and the budget live in the page and reset on reload, and no vendor is contacted. Persist from the pick and change handlers, and load START from your own data.

How does it look on a phone?

The aside stacks above the sections, the cost drops into the line under each title and the status select takes its own full-width line. The sections keep their order.

All 100 todo list blocks