Blogpost 10 - Narrow article with reading progress bar

Pro

A capped-width reading column with a fixed top progress indicator tied to scroll position, category label, and compact prose sections.

Shadcn Blogpost 10 block

Component Data

  • ID:blogpost10
  • Access:pro
  • Created:Jun 11, 2026
  • Type:block

Blogpost 10 block design & features

Blogpost10 targets distraction-free reading with a narrow max-width column and a fixed progress bar across the top of the viewport. An uppercase category label, title, and read-time row open the page before prose sections with multiple headings and paragraphs rendered through typography plugin styles.

The scroll progress indicator fills with the primary color as readers move through the document, giving a lightweight sense of completion without side rails or author chrome.

Visually the layout is minimal and text-dominant, with the thin progress track as the only persistent UI beyond the article itself.

This is a simple to moderate block: you mainly supply title metadata and body copy while the scroll listener handles progress width.

The narrow column keeps line length comfortable on wide monitors; the progress bar spans the full viewport width above the section padding.