shadcn.io is not affiliated with official shadcn/ui
Accordion FAQ Block for Solid
A side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.
Installation
Overview
An accordion FAQ for Solid with Ark UI. The start column holds the title, one sentence and, at its foot, a contact prompt with a Shine Button and an outline link; the end column holds seven questions behind a split divider that runs from the page's top rule to the block's end. The questions are hairline rows under a rule with + marks where it meets the divider and the rail, and each opens with a small plus that turns into a minus, one answer at a time. On a phone the header stacks above the questions, the rows run from rail to rail, and the contact prompt follows the last one. 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, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For product pages, pricing pages and docs home pages where a handful of real questions decide the sign-up.
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. 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. Keep it to about eight: past that, a long accordion buries the last questions, and categories or a search serve visitors better. One answer is open at a time.
Add multiple to the Accordion to let several stay open.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all seven, and closing an answer doesn't remove it.
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 all seven. Tab moves from question to question and on to the contact links, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
Where do the buttons go?
Both are links (href="#"): point Write to support at your help desk or a mailto: address, and Read the docs at your docs. Write to support is the block's one Shine Button: a band of light sweeps across it once on hover and keyboard focus.
Each button's asChild receives its props: spread them onto your router's link.
What moves, and what happens with reduced motion?
The header, the questions and the contact prompt fade up once when the page loads, with CSS transitions (on a phone the contact prompt, below the first screen, simply appears), and an answer eases open under its question while the plus beside it turns into a minus. With reduced motion the entrances are off and the plus becomes a minus without turning. The answers also open and close at once, with no height animation.
How does it fit on a phone?
Below the lg breakpoint the title and sentence stack above the questions, the rows run from rail to rail under a rule with + marks, and the contact prompt follows the last question. A question that doesn't fit wraps to a second line with its plus beside the first, the answers drop to a smaller size, and nothing scrolls sideways at 320 pixels.