shadcn.io is not affiliated with official shadcn/ui
Segmented Bar Recap Blog Block for Radix UI
A 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.
Installation
Overview
A weekly recap for React with Radix UI, written for Fiveby, a product team's newsletter. A start-aligned header ("This week in five posts") sits over a band with one segmented bar, then the five posts as a numbered list that runs from rail to rail and ends the block. Each segment of the bar is one post and as long as its reading time, so the five add up to the total the band names ("17 min in all"). Pointing at a row, or moving focus into it, lights its segment and tints the row; the segment carries the row's number. A row is a number, the title as its one link, a one-line summary and the minutes. Totals and widths are worked out from the typed posts. It's built from Guides and CSS. For newsletters, release digests and any blog that wants a quick sense of the week's weight.
FAQ
How do I change the posts?
Edit POSTS at the top of the file: title, summary, author, minutes, href and a unique id. The segments' widths, the "17 min" total and the bar's accessible label all come from minutes, so they cannot drift from the rows.
Does the highlight work without a mouse?
Yes. The segment lights on hover and also when the title link takes keyboard focus, and it goes out on blur or when the pointer leaves. On a touch screen nothing is hover-only: the numbers on the bar match the numbers on the rows.
Is the bar read out?
The bar is one image with the label "Reading time by post: 4, 3, 5, 2, 3 minutes", and its segments are hidden from assistive technology; the same total is written as text under it. It keeps dir="ltr" so the first post is always at the start of a left-to-right reading.