Shadcn.io is not affiliated with official shadcn/ui
Banner Metric Reading Progress
A progress metric banner for React and Next.js showing article reading completion with a label row, monospace percentage, thin progress bar, and subtext line for minutes remaining built with shadcn/ui and Tailwind CSS
Display article reading progress as a metric at chrome scale with this banner block for React and Next.js. Features an inline BookOpen icon, a label and monospace percentage on the top row, a thin 1.5px progress bar driven by an inline width style, and a subtext line for minutes remaining. Built with TypeScript, Lucide React icons, motion/react subtle entrance animation, and Tailwind CSS theme variables. Perfect for long-form blog platforms, documentation readers, tutorial surfaces, and knowledge bases that need a quiet reading indicator above the article body.
Related Components
React Inline Progress Metric Banner Block
Inline progress metric with thin bar
React Storage Quota Metric Banner Block
Storage quota metric banner
React Sparkline Trend Metric Banner Block
Sparkline trend metric banner
React Live Connectivity Banner Block
Live connectivity status indicator
React Session Countdown Banner Block
Session expiry countdown timer
React Top Bar Payment Methods Banner Block
Top bar payment method tokens
FAQ
Was this page helpful?
Sign in to leave feedback.
Metric Progress Inline
A progress metric banner for React and Next.js with an inline label, tabular metric, thin progress bar, and subtext built with shadcn/ui and Tailwind CSS
Metric Single Stat
A single-stat progress metric banner for React and Next.js with an icon, right-aligned tabular metric, a semantic progress bar, and a subtext line built with shadcn/ui and Tailwind CSS