shadcn.io is not affiliated with official shadcn/ui
Progress Board Task List Block for Radix UI
Eight tasks with a percent slider each and an overall bar that is their mean, grouped into Not started, In progress and Complete only when you let go of a slider, in rows of one fixed height.
Installation
Overview
See how far along everything is, with this progress board to-do list block for React with Radix UI. An Overall band at the top shows one Progress bar and a large percentage that is the mean of all eight tasks, with a count of how many are complete. Below it three sections, Not started, In progress and Complete, list the tasks as cells on shared hairlines, each with its title, a Slider from 0 to 100 in steps of 5 and its number. The overall bar follows a slider as you drag, but the sections wait: a task changes section only when you let go, so nothing moves under your pointer. Every cell has one fixed height, an empty section keeps a "Nothing here yet" row, and the board reserves the room for all of them, so the panel never changes size. The status reads "Moved 'Record the demo walkthrough' to In progress." Bands are ruled by Guides. For launch trackers, content calendars and any list where each item is partly done.
FAQ
How are the sections decided?
By the number alone: 0 is Not started, 100 is Complete and anything between is In progress. The section follows the last value you committed, not the one you are dragging, so a task never jumps while your finger or pointer is on it.
When does a slider commit?
When you release the pointer, or after a keyboard step. Dragging updates the number beside the slider and the overall bar at once; the commit regroups the board and says where the task went. Both are derived from the same list of numbers in values, so they cannot disagree.
What stays local, and how do I save for real?
The percentages. Nothing is sent and the board resets on reload. In your app write the committed value from the commit handler, which is the right place to save, and keep live for the interim display only.
Is it accessible?
Each slider is named by its task ("Percent complete: Draw the pricing page") and announces its value as a percentage. The visible number is hidden from assistive technology so it is not read twice, and one polite message reports each commit and any section change.