Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Expandable Sections FAQ Block for React Aria

A two-level FAQ for a photo-book shop: an accordion of three sections whose panels each hold an accordion of questions, with a summary of how many of each.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An expandable-sections FAQ for React with React Aria. Under a centred header and a summary of how many sections and questions there are, one column holds an accordion of sections; each section opens to a tinted panel with a second accordion of its questions, indented under it. The first section starts open with its first question showing. The outer accordion opens one section at a time and each inner one one question at a time, independently. It is built from Accordion, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For product pages and help centres with enough questions to need chapters.

FAQ

How do I change the sections and questions?

Edit SECTIONS at the top of the file: each section has an id, a title and its questions, each with an id, the question and its answer. The counts in the summary and on each section are derived. FIRST_SECTION and FIRST_QUESTION name what is open on load; set them to ids that don't exist to start with everything closed.

How do the two levels behave?

The outer accordion keeps one section open at a time. Each section has its own inner accordion, which keeps one question open at a time and remembers it while its section is closed, so closing and reopening a section doesn't lose your place.

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?

Every section and every question is a button inside an h3 under the block's h2, because the catalog's Accordion fixes its heading level; Enter or Space opens and closes it, and the button says whether it's expanded. Tab moves from button to button, and there are no arrow-key shortcuts.

How does it fit on a phone?

The column fills the width between the rails, the inner rows keep a smaller indent, and a section's title and its count wrap onto two lines when they must. Nothing scrolls sideways at 320 pixels.

All 100 faq blocks