shadcn.io is not affiliated with official shadcn/ui
FAQ with Contact Card Block for Radix UI
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 Radix UI. 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?
No. This Accordion renders an answer only when its question opens. If search engines must read every answer, render them as a list that always shows them, or add structured data built from the same QUESTIONS array.
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.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
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 takes asChild with the link inside, so it can be your router's link.