shadcn.io is not affiliated with official shadcn/ui
Animated Counter FAQ Block for Radix UI
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 Radix UI. 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.
Set type="multiple" (with an array defaultValue) to let several stay open.
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, or add structured data built from the same array.
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.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.