Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Sprint Backlog Task List Block for React

A sprint backlog of nine stories in To do, In progress and Done, each with a points badge and a status select that moves the row, over totals, a progress bar and a sentence comparing remaining points with the ideal line.

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 sprint from its stories, with this sprint backlog to-do list block for React with Base UI. A band at the top works out the sums from the stories: total, done and remaining points and the working days to go from a fixed date to the sprint's end, a bar of what is done with a tick where the ideal line stands, and one sentence such as "2 points behind the ideal". Below it three sections, To do, In progress and Done, list the stories, each with a points Badge and a Native Select for its status; choosing a status moves the row into that section, keeps focus on its select and recomputes every figure. The list has a fixed height so sections that empty or fill never move the page, and "Reset sprint" restores the plan. Guides rule the bands. For agile teams, product managers and anyone who plans work in points.

FAQ

What is the ideal line?

A straight line that falls evenly from the sprint's total points to zero over the ten working days. With 30 points and 7 working days to go it expects 21 points still open, so 23 open points reads "2 points behind the ideal". The constants DAYS and DAYS_TO_GO set the calendar.

What does changing a status do?

The row moves to the matching section, the done, remaining and pace figures change, and the status line announces it ("Moved 'Release notes for v4.3' to Done. 21 points remain, 0 points ahead of the ideal."). Focus returns to the same row's select after the move.

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

Every status lives in the page and resets on reload. In your app write the new status from move, load the stories and their points from your tracker, and compute the days to go from the sprint's real dates.

How is this different from the burndown and estimation blocks?

This one is a status list with sums and no chart; the burndown block draws the days, and the estimation block sizes the stories. All three describe the same kind of sprint, Mon 12 to Fri 23 Oct.

Is it accessible?

Each select is named for its story ("Status of 'Progress bar on imports'"), points are text in a badge, and the bar is hidden from screen readers because the sentence and the totals say the same thing in words. One polite status message announces every move.

How does it look on a phone?

The four figures wrap two across, each story keeps its title, points and select on one row, and the list scrolls inside a named region of fixed height.

All 100 todo list blocks