shadcn.io is not affiliated with official shadcn/ui
Reading Progress FAQ Block for Vue
A FAQ for a safety-training platform with a reading tracker: a ring that fills as questions are opened, a check on each row you've read, and a Shine Button once all eight are read.
Installation
Overview
A reading-tracker FAQ for Vue with Ark UI. A start-aligned header sits over a progress band under a rule with + marks: a ring that fills as you open questions, with "1 of 8 read" beside it. Below it, eight questions run from rail to rail; a row you've opened gets a small check at its start, and several can stay open. At 8 of 8 the band reads "You're all caught up" and the block's one Shine Button, "Start the safety check", appears at its end. Progress lives in memory, so nothing is stored. It's built from Accordion, Circular Progress, Shine Button and Guides, with CSS transitions for the ring and the entrance and your theme's tokens for every colour. For onboarding, policy and training pages where finishing the reading is part of the goal.
FAQ
How do I change the questions and the final action?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The header and the band's words say "Eight", so change them if you add or remove a question: the count and the ring's percentage come from the list's length. The final Shine Button is a link (href="#"): point it at your quiz or sign-off page.
The button takes asChild with the link inside, so it can be your router's link.
What counts as read?
A question counts the first time it opens, including the one that is open when the page loads, and closing it doesn't undo it. The ring, the "of 8" count and the checks all come from one list of ids in state; a reload starts again from OPEN_QUESTION. To keep progress, write that list to storage or your own endpoint and read it back in an effect after mount.
The Accordion takes multiple, so any number of rows stay open.
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 it begins with "Read:" for screen readers once you've opened it. The ring is decorative; the words beside it are a polite status that reads "3 of 8 read" and, at the end, "You're all caught up". When the Shine Button appears it takes its place after the band in the reading order.
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?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens, and search engines and server rendering see all eight.
What moves, and what happens with reduced motion?
The header and the band fade up once when the page loads, and the ring's stroke eases to its new length each time you open a question. With reduced motion the entrance is off and the ring jumps to the new length. The answers open and close at once, with no height animation.