shadcn.io is not affiliated with official shadcn/ui
Table of Contents FAQ Block for React Aria
A FAQ for an object-storage service with a sticky table of contents: three topics and their questions in an outline that follows the reader, beside topic bands that each hold an accordion.
Installation
Overview
A FAQ with a table of contents for React with React Aria. A rail at the start holds an outline of three topics with their questions nested under, and it stays in view as you scroll; a bar beside the outline follows the topic you are reading. The end column, behind a split divider, is one band per topic, each with its name, a question count and an accordion. Choosing a question in the outline jumps to it and opens it. On a phone the outline gives way to a Jump to a topic select under the header. It is built from Toc, Accordion, Badge, Native Select and Guides, with CSS for the entrance and your theme's tokens for every colour. For documentation, help centres and product FAQs long enough that readers need a map.
FAQ
How do I change the topics and questions?
Edit TOPICS at the top of the file: each topic has an id, a title and its questions, and each question an id, the question and its answer. The outline (OUTLINE), the counts and the Jump to select are all derived from it. The ids double as anchors on the page, so keep them unique and prefix them (brackwater-…) if more than one FAQ can share a page. FIRST_OPEN names the question that is open on load.
How does the outline follow the reader?
The Toc watches each topic heading with an IntersectionObserver. The block keeps only the first heading in view as current, so the bar sits beside one topic at a time; at the very top and bottom of the page it pins to the first and last topic. The outline is sticky at lg and up, so no ancestor of it may add overflow: hidden, auto or scroll (the section's overflow-x-clip is fine). Adjust lg:top-20 to clear your site header.
What does choosing a question in the outline do?
It jumps to the question and opens it. One answer is open at a time across the whole block: opening a question in one topic closes the one open in another, so the page doesn't grow as people skim. The outline's links are real anchors (#brackwater-region), so they also work as deep links.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.
How does it work with a keyboard and a screen reader?
The outline is a navigation landmark named by its title, with a link for each topic and each question. Every question is a button inside a heading, and Enter or Space opens it. Both the topic headings and the questions are h3 under the block's h2, because the catalog's Accordion fixes its heading level.
Tab moves from question to question; there are no arrow-key shortcuts between rows on this base.