shadcn.io is not affiliated with official shadcn/ui
Avatars FAQ Block for React Aria
An FAQ where every answer is signed: a stack of four initials avatars under the header and a named answerer at the foot of each answer.
Installation
Overview
An avatars FAQ for React with React Aria. A header carries a stack of four initials avatars and the first names of the team, at its end on a wide screen and under the title on a phone; seven questions run rail to rail below a rule with + marks, each opened by a ringed chevron, and every answer ends with a small avatar and a line that says who answered it, with their role. The people are the platform's own staff, not customers, and they're drawn as initials, so there are no photos to host or credit. It's built from Accordion, Avatar and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product and service pages where a named person behind each answer builds trust.
FAQ
How do I change who answers?
Edit TEAM (an id, a first name, the initials, the full name and a role) and set each question's by to a person's id. The stack in the header, the names under it and the signatures are all built from the same list. To use a photo, add an AvatarImage before the fallback: the initials show until it loads, and if it fails.
How do I change the questions?
Edit QUESTIONS: each entry is an id, the question, its answer and by. 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.
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 seven, and the browser's find in page opens the answer that holds a match.
Are the avatars read out?
No. The stack in the header is hidden from assistive technology, because the line beside it names everyone in words. In each answer the signature reads "Answered by" and the person's name and role as text, and its small avatar is decoration.
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.