shadcn.io is not affiliated with official shadcn/ui
Goal Progress Task List Block for React Aria
Four goals, each built from four linked tasks you tick, a bar with one dot per task, a target date with the days to go and a pace word of Ahead, On pace or Behind worked out from the time gone.
Installation
Overview
Turn goals into tasks that can be done, with this goal progress to-do list block for React with React Aria. A summary band counts the tasks done across every goal and how many goals are behind. Four cards sit two across, each with the goal's name, its target date with the days to go from a fixed "today", a pace word with an arrow, and a bar from Progress with one dot on it per linked task that fills when you tick it. Under the bar the four tasks are Checkbox rows named by their titles. The pace word compares the tasks done with the share of the time between the goal's start and its target that has passed: half a task or more ahead is Ahead, within half a task is On pace, and further below is "Behind by 1 task". A goal with every task done reads Done. The formula is printed under the cards. Bands are ruled by Guides. For team and personal goals where progress is a list of things to do rather than a typed percentage.
FAQ
How is the pace word worked out?
Expected tasks are the share of the time elapsed, between the goal's start date and its target date, times the number of tasks. Pace compares tasks done with that: a gap of +0.5 or more is Ahead, -0.5 up to +0.5 is On pace, and below -0.5 is Behind by the rounded gap. For example, 23 days into a 60-day goal with four tasks expects 1.5 done; with one done the gap is -0.5, which reads Behind by 1 task.
Which day is today?
A fixed constant, Wed 14 Oct 2026, so the server and every visitor see the same numbers and the days to go never change under you. Point AS_OF at the current date when you use real data.
What stays local, and how do I save for real?
The ticks. Nothing is sent and they reset when you reload. In your app write each task's done flag from the tick handler and load goals, start and target dates from your store.
Is it accessible?
Each checkbox is named by its task, the pace is a word with an arrow rather than a colour, and the bar and dots are decorative while the text states "2 of 4 tasks". One polite message reads the new pace after each tick ("Ship the 2027 wall calendar: On pace").