shadcn.io is not affiliated with official shadcn/ui
Progress Tracker Changelog Block for React Aria
A progress tracker for a project tool: four framed cells, two by two, each with a ring filled to the share of its tasks done, its name, a count like 7 of 12 tasks, a target quarter and a Remaining tasks row that opens to the list.
Installation
Overview
A progress tracker changelog for React with React Aria, written for Fillrate, a fictional project tracking tool. A centred header carries the title and one sentence; under it four framed cells sit in a grid, two by two from sm and one column on a phone, each cell drawn with a frame, corner + marks and a little overshoot. A cell is one feature being finished: a ring that fills to the share of its tasks done with the percentage in the middle, the feature's name, "7 of 12 tasks" and a target quarter. Under that a Remaining tasks row, with a count, opens to the tasks still to do, so the ring always has a list to match. The ring, the percentage and the count come from the same two numbers per feature, the total and the tasks remaining. Targets are quarters. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Circular Progress, Collapsible and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For project updates and release pages that want progress to read at a glance. The features and tasks are example data.
FAQ
How do I change the features and their tasks?
Edit FEATURES at the top of the file. Each feature has a name, a quarter as its target, the total number of tasks and the list of tasks remaining. The number done is the total minus the remaining ones, and the ring's value, the percentage in its middle and the "7 of 12 tasks" line are all worked out from them, so they cannot disagree. Tick a task off by deleting it from remaining.
Is the ring accessible?
The ring and the percentage inside it are decoration, hidden from assistive technology, because the count under the name says the same in text: "7 of 12 tasks", followed, for a screen reader only, by "58 percent done". The ring is drawn in your theme's foreground colour, so it reads in any theme.
What does the Remaining tasks row do, and is the list in the markup?
It is a disclosure: pressing it opens the list of tasks still to do under the cell and turns its chevron. Each cell opens on its own, and the cell grows to fit while its neighbour in the row keeps its frame. React Aria's Collapsible keeps closed content in the markup and marks it hidden until the row opens.
How does it work with a keyboard and a screen reader?
Each cell is an article with an h3 for the feature, and the cells are a real list. The Remaining tasks row is a button that says whether it is expanded; Tab moves from row to row and Enter or Space opens one, with a visible focus ring inside the cell's frame.
How does it fit on a phone and in a right-to-left layout?
Below sm the cells stack in one column and the ring stays beside the name and counts, with the text wrapping next to it. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the ring moves to the right of the text, the chevron and frames mirror, and the percentages and quarters keep their form.