shadcn.io is not affiliated with official shadcn/ui
FAQ with Contact Card Block for React Aria
An FAQ beside a contact card for an energy supplier: seven questions in an accordion, and behind a split divider a sticky card in card with email, live chat status, phone hours and a Shine Button.
Installation
Overview
An FAQ with a contact card for React with React Aria. The start column holds the title, one sentence and seven questions in hairline rows under a rule with + marks; the end column, behind a split divider that runs from the page's top rule to the block's end, holds a card in card that follows your theme (a tinted shell with + marks on its corners, a raised panel). The card lists three ways to reach a person, an email address, live chat with a status dot and its reply time, and a phone number with its hours, and ends in the block's one Shine Button. The card stays in view while the questions scroll; on a phone it follows the last question. It's built from Accordion, Item, Status, Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For support pages where most visitors find their answer and the rest need to know how to reach someone.
FAQ
How do I change the questions and the contact details?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that's open on load. The three contact rows are written in the markup under the card: change the address in the mailto: link, the number in the tel: link and the hours beside it. The live chat line is plain text with a green dot, so it says "Online" whether or not anyone is; connect it to your chat provider's status, or remove the row, before you ship.
How does the card stay in view?
From the lg breakpoint the card's box is position: sticky with a small offset, so it holds still while the questions scroll past and stops at the end of the block. Sticky stops working if a parent of the block has overflow set to hidden or auto, so don't wrap the section in one (overflow-x: clip on the section is fine). Below lg it isn't sticky: it sits after the last question.
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 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, and the card's title is an h3 too. Tab moves from question to question, then through the email, chat and phone rows and on to the button; Enter or Space opens and closes a question, and the button says whether it's expanded. The three contact rows are a real list.
Tab alone moves between questions on this library: its accordion doesn't take arrow keys.
Where do the buttons and links go?
Start a chat is the block's one Shine Button, a link (href="#"): point it at your chat page or open your widget from it. The email and phone rows are plain links (mailto: and tel:), and the phone number keeps its digits in order in right-to-left pages.
The button renders a link when it has an href.