shadcn.io is not affiliated with official shadcn/ui
Reading Time Blog Block for React
Posts by length with a reading-speed Slider: every post shows its words, a length bar against the longest post and the minutes it takes at your speed, with a total that recalculates as you move the slider.
Installation
Overview
A reading-time table for React with Base UI, written for Tallyword, a writing-craft blog. A centred header holds a reading-speed Slider from 150 to 300 words per minute. Below, five posts sit on hairline rows from rail to rail, longest first: the title, the minutes it takes at your speed, a length bar drawn against the longest post and the word count. Moving the slider recalculates every row and the total in the band at the foot. Screen readers hear the new total once the slider settles, not on every step. The word counts are example data. It is built from Guides and Slider. For long-form blogs, newsletters and reading lists.
FAQ
How is the reading time worked out?
Words divided by your speed, rounded up to whole minutes (minutesOf), so no post ever reads "0 minutes". The total is the sum of the rows you see, so the numbers in the band always add up. Change DEFAULT_SPEED, MIN_SPEED or MAX_SPEED to move the slider's range.
What do the bars show?
Length only: each bar is the post's words as a share of the longest post, and the longest fills its track. They do not change with the slider, because the words do not. The bars are decorative; the word counts beside them carry the same facts in text.
How is the slider announced?
The slider reads out its value as "230 words per minute". A hidden status line speaks the new total about 600 milliseconds after you stop, so dragging does not flood a screen reader. Nothing is spoken on load.
Related
- Pro
Compact List Blog
Post listsTwenty 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
Posts Table Blog
Post listsTen posts in a sortable table on one ruled band: title, author, date, reading time and category, with column headings that are buttons and say which way they sort.
- Pro
Reading Preferences Blog
Reading toolsReader preferences with a live preview: a Slider for text size, a ToggleGroup for serif or sans, a Select for line spacing and a Switch for justified text, with a framed sample article that follows every control and a Reset button.
- Pro
Speed Select Audio Blog
Audio, video, photosA read-aloud list: a Select picks the playback speed and every article's listening time and the total recompute, beside a waveform drawn from the title's letters with chapter ticks.
- 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
Post Summaries Blog
Article partsLong-read summaries with a length toggle: One line, Three bullets or Paragraph switches every post summary at once, each labelled as written by the author, in rows that never change height.