shadcn.io is not affiliated with official shadcn/ui
Series Tracker Blog Block for React
A reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
Installation
Overview
A series tracker for React with Base UI, written for Tallowdb Notes, a build-your-own-database series. A start-aligned header says how many of the six parts you have read and how long the rest takes. Under it a split behind a divider holds the parts at the start and the current part at the end. The parts are the catalog's vertical Steps drawn read-only as hairline rows: a tick for each part read, a haloed number for the part you are on, a plain number for the rest, each title one link with its reading time and a word for where you are, so nothing depends on colour. At the end the current part's panel shows a typographic cover that sets "Part 3" over a ruler of six ticks, the title, a one-line dek, the byline, a thin bar with "2 of 6 parts read" and the block's one Shine Button, "Continue to part 3". On a phone the panel comes first and the parts follow. It's built from Steps, Progress, Avatar, Badge, Shine Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a multi-part tutorial, a course written as posts or any run of articles meant to be read in order. The series, the author and where the reader is up to are example data; nothing is saved.
FAQ
How do I change where the reader is up to?
Change AT at the top of the file, a zero-based index into PARTS: parts before it show a tick, that part shows a haloed number and the panel, and the rest show plain numbers. The header sentence, the progress bar, the ruler on the cover and the Shine Button's label are all worked out from it, as is the minutes left. In a real site, set AT from the reader's history, for example the first part they haven't opened.
Are the Steps interactive?
No. They are the catalog's Steps drawn as a read-only list, with role="list" on the list and role="listitem" on each part, the current one marked aria-current="step". What you can use is each part's title: it is a link, and the whole row is its target. A tick, a number and the words "Read", "You are here" or "Not read yet" say the state in three ways.
How is the cover drawn?
It is a typographic cover, sized in container units: the series name and "3 / 6" under a masthead rule, the part's number set very large, and a ruler of six small bars (solid for read, half for the current part, faint for the rest). It uses only your theme's tokens, so it follows light and dark and any preset, and it never mirrors in a right-to-left page, as artwork shouldn't.
How does it fit on a phone?
The panel comes first, so the part you are on and its button are within the first screen, and the six parts follow as rows. From lg the parts sit at the start and the panel at the end behind a divider that meets the top rule with a plus mark. Nothing scrolls sideways at 320 pixels.
Related
- Pro
Series Deck Grid Blog
Card gridsSix series as decks: each cell draws three offset covers, the series title as one link, a status badge and a thin bar with how far you have read, with a toggle group that filters All, In progress and Finished without moving the page.
- Pro
Rail Timeline Blog
Archives by dateA local-history society's notebook as a vertical rail: a band per year, the year sticky at the rail's start, and dated entries hung off the rail on dots.
- Pro
Reading Progress Blog
Reading toolsFour 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.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- Pro
Topic Cluster Diagram Blog
Topics and indexesA hub-and-spoke diagram of a topic cluster: the pillar guide at the hub of a drawn wheel, six topic links on the rim, and the cluster's posts as ruled rows beside it; on a phone a nested list with connectors.
- Pro
Featured Post Blog
Featured storyOne lead post as a split, its copy beside a drawn greyscale cover behind a divider, with three more posts as cells on shared hairlines under it.