shadcn.io is not affiliated with official shadcn/ui
Animated Counter FAQ Block for React Aria
A side-header FAQ for an analytics tool: one large figure that counts up to this week's answered questions, the topics behind it, and seven questions in an accordion.
Installation
Overview
An animated-counter FAQ for React with React Aria. The start column holds the title, one sentence and a single large figure that counts up once to this week's answered questions, with the topics that add up to it listed at the foot; the end column holds seven questions in an accordion, behind a split divider that runs from the page's top rule to the block's end. On a phone the header and the figure stack above the questions, and the topic list follows them. It's built from Accordion, Counting Number and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product and pricing pages that want one number to say how much help is on offer.
FAQ
Where does the number come from?
From TOPICS, the list of topics at the foot of the start column: TOTAL is the sum of their counts, so the big figure and the list can't disagree. Change a count and the total follows. Label it with a period ("this week"), because a bare number reads as a claim.
How does the count work, and does anything shift while it runs?
The Counting Number counts up once when the page loads, from zero to the total, slowing as it settles. A copy of the final number sits invisibly in the same grid cell, so the figure takes its final width from the first frame and nothing moves while it counts. Screen readers read the final value, never the numbers in between. With reduced motion the figure shows its final value at once, with no count.
How do I change the questions?
Edit QUESTIONS: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. One answer is open at a time.
Add allowsMultipleExpanded to the Accordion to let several stay open.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found": search engines see all seven, and the browser's find in page opens the answer that holds a match.
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, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.