Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Sprint Board Timeline Block for Ark UI

Five finished sprints with committed and completed points as paired bars, the next sprint drawn dashed, and a select that forecasts its velocity from the last three or five sprints.

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 the next sprint from what the team really finished with this sprint board timeline for React with Ark UI. It is written for Sprintcast, a fictional agile-planning tool. A hairline frame with a plus mark on each corner holds a band with a select, Forecast from the last 3 or 5 sprints, and three figures: velocity, completion rate and the likely points for the next sprint. Under it a vertical rail lists five finished two-week sprints, each with its dates, two bars on a shared scale for points committed and points completed, and the words "Counted in the forecast" or "Not counted". The next sprint is drawn dashed with its forecast bar. Changing the basis re-derives every figure and the dashed bar. It is built from Native Select and Guides with CSS for the bars. For agile teams, release planning and any forecast made from past throughput. The points are example data, and this is a forecast, not a burndown.

FAQ

How do I change the sprints?

Edit PAST for the finished sprints (committed, completed, dates) and NEXT for the planned one. SCALE sets the largest value the bars can show, in points.

How is the forecast worked out?

The velocity is the mean of the completed points of the last 3 or 5 sprints, rounded, and the completion rate is completed over committed for the same sprints. The likely points for the next sprint are the velocity, never more than what was committed to.

What stays in the page?

The chosen basis. Nothing is saved or sent. To make it real, feed PAST from your tracker's closed sprints and the next sprint's commitment from your planning board.

Does the panel change height when I change the basis?

No. All six rows keep the same lines whichever basis is chosen. Only the bars, the figures and the marks beside each sprint change.

Is it accessible?

The bars are decorative: each row also says "38 of 40 points" in text. The select has a visible label, and the status line says the basis, the velocity and the likely points in a polite live region.

How does it look on a phone?

The select and the three figures stack, and in each sprint the name, the bars and the points stack in that order under the rail dot.

All 100 timeline blocks