shadcn.io is not affiliated with official shadcn/ui
FAQ Carousel Block for React Aria
Eight help-centre questions in four groups, one per swipeable slide, each answer a Collapsible that opens inside a box that already has its room, with group buttons that jump, Home and End keys and a Was this helpful pair that counts locally.
Installation
Overview
Answer common questions one at a time without a long page, with this FAQ carousel for React with React Aria. Answerbook, a help centre, has eight questions in four groups (Billing, Account, Technical and Security) on one ruled track, one question per slide. The answer is a Collapsible under the question, and it opens inside the slide: every slide keeps room for its opened answer from an unseen copy, so opening one never resizes the track or swipes it. Each slide ends with "Was this helpful?" and a pair of Buttons, Yes and No, that count locally and can be taken back. A band above the track has one button for each group that jumps to the group's first question, and the foot holds the status line, a dot for each question, and Previous and Next. The arrow keys move the track and Home and End jump to the first and last question. The ruled bands come from Guides. Answerbook and the answers are made up for the example.
FAQ
How do I use my own questions?
Edit QUESTIONS and GROUPS. A question has an id, a group (one of GROUPS), the question, the answer and the earlier yes and no votes. The group buttons, the counts beside them, the counter and the dots are derived from that list. Keep each group's questions together so a group button lands on its first one.
Why doesn't opening an answer move anything?
Each slide draws its answer twice in one grid cell: the real one inside the Collapsible, and an unseen copy that is hidden from screen readers and from the tab order. The cell is always as tall as the opened answer, so the track, the foot and the page never change height, and nothing below the track moves when an answer opens or closes.
How does it work with a keyboard?
Tab reaches the group buttons, then the question, the Yes and No buttons of the question in view, then the dots, Previous and Next. Enter or Space opens and closes the answer and focus stays on the question, so closing never loses your place. With focus inside the track, the arrow keys move to the next or previous question (mirrored in a right-to-left layout), and Home and End jump to the first and last. Questions that are out of view are hidden from the tab order and from screen readers.
How does Was this helpful? count?
Each question starts with the typed yes and no counts and adds your vote to the one you chose. Pressing the same button again takes the vote back, and pressing the other one moves it. The buttons are toggle buttons, so a screen reader hears whether each is pressed, and the status line says "Thanks, noted in this demo."
What is announced when it moves?
The status line is the block's one polite live region. After the track moves it says where you are ("Question 3 of 8, Account"); after a vote it says what happened. The track itself is silent, so the same question is not read twice.
What stays local in the demo?
Everything. The questions and the vote counts are typed example data, a vote only changes this page, and nothing is sent. To wire it for real, load the questions and their counts from your help-centre API into QUESTIONS, and make vote send the vote and return the new counts before it says it was noted.