shadcn.io is not affiliated with official shadcn/ui
Reading Progress Blog Block for Radix UI
Four articles you have opened as rows that lead with a progress ring, then the title, the time left and a Continue link; the header counts how many are still in progress.
Installation
Overview
A continue-reading shelf for React with Radix UI, written for Turnleaf Review, a literary magazine. Four articles the visitor has opened are rows that each lead with a progress ring (the share read, drawn in your foreground colour, with the figure inside), then the title, the author and the time left, and a Continue link at the end (a phone puts it under the title). The header counts what is still open, derived from the rows: "3 in progress". A finished article shows a check in its ring and "Read again". The progress is example data and nothing is tracked. It's built from Guides and CircularProgress, and it's a static server component. For magazines, courses and docs that remember where a reader stopped.
FAQ
Where does the progress come from?
From ARTICLES at the top of the file: each has a progress from 0 to 100 and a length in minutes. The time left is derived (rounded up) and the header's count is the number of articles under 100. Feed it from your own store; the block tracks nothing itself.
How is the ring read by a screen reader?
The ring and its figure are decorative; the same facts are text in the row: the author, "6 min left" and a hidden "72 percent read". The link is named "Continue" followed by the article's title, so five links in a list stay distinct.
What does the Continue link cover?
The whole row: its after: box fills the row and carries the focus ring, so a click anywhere opens the article and the heading, ring and time are part of the target.
How does it fit on a phone?
The ring stays at the start, the Continue link moves under the title and the title wraps. The four rows take about one screen and nothing scrolls sideways at 320 pixels.