shadcn.io is not affiliated with official shadcn/ui
Reading Time Blog Block for React Aria
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 React Aria, 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.