shadcn.io is not affiliated with official shadcn/ui
Popularity Bars FAQ Block for Radix UI
A FAQ for a tea shop ordered by how often each answer is read: a count column at the end of every row and a thin bar under each question, as long as its count.
Installation
Overview
A popularity FAQ for React with Radix UI. A start-aligned header sits over six accordion rows that run from rail to rail under a rule with + marks, ordered by how often each is read, and a column header says so: "Most read first" at the start, "Reads this quarter" at the end. Every row has a count column at its end ("1.9k reads") and, under its question, a thin bar as long as the count is against the most-read row. The order, the bars and the counts all come from one list of numbers, and nothing needs a script. It's built from Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For documentation homes and support pages where showing what others read first guides the rest.
FAQ
Where do the counts come from, and how do I change them?
Edit ENTRIES at the top of the file: each entry is an id, the question, its answer and reads, a plain number for the quarter. They can be in any order: the block sorts them, most read first, and MOST_READS (the largest) sets the bar's full length. To use real figures, fetch the numbers from your analytics on the server and pass them in as reads; the label, the order and the bars follow.
Why both a bar and a number?
The number is the information and the bar is a glance: it's hidden from screen readers, because the count beside it says the same thing in words. Each bar is as long as its count is against the top row, so the first is always full length. The count is formatted by readsOf ("1.9k", or the whole number under a thousand) and wrapped in bdi, so a right-to-left layout keeps it in reading order.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2, and its name includes the count ("How hot should the water be? 1.9k reads"), so a screen reader hears the popularity with the question. One answer is open at a time.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. If search engines must read every answer, render them as a list that always shows them.