shadcn.io is not affiliated with official shadcn/ui
Numbered FAQ Block for React Aria
A numbered FAQ for a wine club: eight accordion rows from rail to rail, with a margin of tabular numerals, 01 to 08, behind a hairline; the open row's numeral turns to full strength.
Installation
Overview
A numbered FAQ for React with React Aria. A start-aligned title and sentence sit above a band of eight accordion rows that run from rail to rail under a rule with + marks. At the start of every row is a margin of tabular numerals, 01 to 08, in a monospace face, behind a hairline that runs the height of the band and meets the rule with a + mark; answers are indented to sit beside the questions, not under the numbers. The open row's numeral turns to full strength and a small arrow at the end of the row turns over. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For onboarding and member pages where the order of the questions matters a little, or where a number makes an answer easy to cite.
FAQ
How do I change the questions?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. The numerals are made from each row's position, zero-padded, so adding, removing or reordering a row renumbers the rest. OPEN_QUESTION names the one that's open on load. Eight fit the layout. 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 8, 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 every question. 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 numerals are decorative and hidden from assistive technology, so a screen reader reads the question alone.
How is the numeral margin built?
The numerals sit in a fixed-width column at the start of each trigger, and the same width is the indent of every answer, so the two stay aligned. The hairline is a narrow absolute box the same width, drawn by Guides, which gives it + marks where it crosses the band's top rule. On a phone the margin is narrower, and the numerals and the line stay.
What moves, and what happens with reduced motion?
The header and the band fade up once when the page loads, with CSS transitions. The numeral's colour and the arrow's turn change as a row opens. With reduced motion the entrances are off and the arrow flips without turning. The catalog's Accordion still eases an answer's height over 200 milliseconds.