Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Segmented Bar Recap Blog Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A weekly recap for React with Base 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.

Why is the whole row clickable?

The title link stretches over the row with a pseudo-element, so the row is one big target and the focus ring is drawn around the whole row, while the title stays the only link for a screen reader.

Does it work right to left?

Yes. The list flips and the minutes and totals are isolated with bdi; the bar stays left to right on purpose, as a time series does.

  • Pro

    Week Board Blog

    Archives by date

    A news digest's week as five columns, Monday to Friday, each with a huge day numeral and that day's posts or a quiet 'No post', in a snap scroller on phones.

  • Pro

    Email Digest Blog

    Subscribe and alerts

    A morning briefing shown as the email it is: drawn mail chrome, four summaries and an unsubscribe line, with a Switch that turns them into monospaced plain text.

  • Pro

    Compact List Blog

    Post lists

    Twenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.

  • Pro

    Trending Posts Blog

    Post lists

    Six ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.

  • Pro

    Sortable Issue Archive Newsletter Blog

    Archives by date

    A newsletter's back issues as rows with large mono issue numbers, subject lines, dates and an open-rate bar, with a Select that sorts them by newest, best opened or oldest.

  • Pro

    Reading List Blog

    Reading tools

    Five 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.

All 100 blog blocks