shadcn.io is not affiliated with official shadcn/ui
Milestone Rail Blog Block for React
A publication's milestones as a rail of five nodes under a centred header: reached ones solid with a tick and their day, the next one outlined with a progress bar and 38 posts to go; a vertical list on phones.
Installation
Overview
A milestone rail for React with Base UI, written for Fellwick, a hill-walking journal. A centred header ("462 posts and counting") sits over a band that ends the block: a rail of five nodes (First post, 100 posts, 100k reads, 5 years, 500 posts). Reached milestones are solid nodes with a tick and the day they were reached; the next one is outlined and carries a "38 posts to go" badge, a progress bar and "462 of 500 posts". Whether a node is reached, which is next and every figure under them are worked out from the journal's posts and reads per year and its start date, as of one fixed day. A phone turns the rail into a vertical list with the rail at its start. It's built from Guides, Badge and Progress. For journals, newsletters and communities that celebrate how far they've come.
FAQ
How do I use my own milestones?
Edit YEARS (posts and reads by year), STARTED and AS_OF (the one day every figure is counted on), and the MILESTONES list: a label, the metric it watches ("posts", "reads" or "days"), its target, a unit and, for reached ones, reachedOn as an ISO date. A node is reached when its metric has passed its target; the first one that has not is the next, and its remaining count and bar are calculated, so nothing is typed as a total.
Why a fixed date instead of today?
So the page prints the same on the server and in every browser, and never goes stale on a cached page. Set AS_OF to today's date when you generate the page.
How is the progress bar named?
It is decorative: the "38 posts to go" badge and the "462 of 500 posts" line carry the facts in text. The bar is hidden from assistive technology and still labelled, as the library requires.
Related
- Pro
Period Toggle Stats Blog
Stats and draftsA blog's own numbers: a 7, 30 or 90 day toggle swaps a strip of four figures and five ranked top posts with bars; the rows stay in place and take whichever post holds each rank.
- Pro
Author Leaderboard Blog
Authors and staffSix writers ranked by posts with a bar, a count and twelve weekly streak dots, and a This year / All time toggle that changes the figures and the order.
- 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
Scroll Depth Map Blog
Stats and draftsOne post's scroll depth: a drawn article outline with markers at 25, 50, 75 and 100 percent and the share still reading, beside six figures that count up; a list of the markers on phones.
- 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
Segmented Bar Recap Blog
Post listsA product team's weekly recap as five numbered posts under one segmented bar whose segments are as long as each post's reading time; pointing at a row lights its segment.