Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Project Milestones Timeline Block for Ark UI

Five project milestones as diamonds on a rail, each with a target date and a progress bar with a tick for the share of its window already used, and a toggle that swaps in three dated snapshots.

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

See how far along each milestone should be with this project milestones timeline for React with Ark UI. It is written for Milestonely, a fictional delivery tracker. A hairline frame with a plus mark on each corner holds five milestones of a customer-portal project on a vertical rail of diamonds, filled once a milestone is done. Each has its target date and a bar for the share done, with a tick for the share of its window that has already gone by, so the gap between the bar and the tick is how far ahead or behind it is, said in words ("Behind by 21 points"). A toggle in the header, 1 Oct, 8 Oct or 14 Oct, swaps in three typed snapshots: the bars grow, the ticks move and the foot counts the milestones that are behind. It is built from Toggle Group and Guides with CSS for the bars. For delivery tracking, status updates and any plan reviewed on set dates. The progress figures are example data.

FAQ

How do I change the milestones and snapshots?

Edit SNAPSHOTS for the as-of days and MILESTONES for each milestone's start, target and done list, one percentage per snapshot in the same order. The tick position, the verdict and the count of milestones behind are derived.

How is the tick worked out?

It is the share of the window from start to target that has passed on the snapshot's day, clamped between 0 and 100. A milestone is behind when the bar is more than SLACK points under it (5 by default), ahead when it is more than that over.

What stays in the page?

The chosen snapshot. Nothing is saved or sent. To make it real, store a progress reading for each milestone every time you review and feed the list of snapshots from those readings.

Does the panel change height when I switch snapshots?

No. Every row keeps the same lines whichever snapshot is shown, and the status line reserves its line, so only the bars, ticks and words change.

Is it accessible?

The bars are decorative and the text beside them gives the same facts: the verdict, the percentage done and the expected percentage. The snapshot toggle is named, keyboard operable and announces the new count in a polite status line.

How does it look on a phone?

The toggle drops under the heading and the rail keeps the diamonds at the start, with each bar the full width of the row.

All 100 timeline blocks