shadcn.io is not affiliated with official shadcn/ui
Daily Planner Task List Block for Radix UI
A day planner that splits Wednesday into Morning, Afternoon and Evening bands, with an add field and a part-of-the-day choice, a progress bar for the whole day and a one-line Undo for deletes.
Installation
Overview
Plan a single day in three parts, with this daily planner to-do list block for React with Radix UI. A hairline frame with a plus mark on each corner holds an add band with a labelled Input, a Segment Group that picks Morning, Afternoon or Evening, and the only colored control, a Shine Button that adds the task to the part you chose. Under it a Progress bar counts the whole day ("5 of 9 done") and, once every box is ticked, says so in one calm line. Three bands follow, each with its own icon, its hours, a count and the tasks of that part of the day as Checkbox rows with a time. Deleting a task keeps a one-line Undo that puts it back where it was. Bands and the frame are ruled by Guides, and the only motion is a CSS entrance. For personal planners, daily routines and any product that organizes a day.
FAQ
How do I load my own tasks?
Replace START with your tasks. Each has an id, a title, a done flag, a part (morning, afternoon or evening) and an optional time such as 09:30. The weekday and date in the header come from the AS_OF constant, a fixed "today" that keeps the server and every visitor in agreement; point it at the current date when you use real data.
What stays local, and how do I save for real?
Everything. Adding, ticking, deleting and undoing change state on the page and nothing is sent anywhere, so the plan resets when you reload. In your app write each change from add, toggle, remove and undo to your own store, and load the initial plan from it.
How do I change the parts of the day?
They are the PARTS array: an id, a name and a line of hours. Add or rename entries and give each task the matching part; the bands, the segmented choice and the counts follow. The icon for each part is drawn by PartMark.
What happens when every task is ticked?
The line under the progress bar changes to "Everything's done for Wednesday." and the status message says the same once. There is no confetti and no score, only the count. Ticking a task off again brings the open count back.
Is it accessible?
Each checkbox is named by its task title, the delete button names the task it removes, the part-of-the-day choice is a labelled group and the add field has a label. A single polite status message announces what changed. Done is shown by the checkbox, a muted color and a strike through the title, never by color alone.