shadcn.io is not affiliated with official shadcn/ui
FAQ with Call to Action Block for Svelte
An FAQ whose answers end in the next step, for a clinic scheduling tool: six accordion rows, each open answer closing with a button that fits it, the first one a Shine Button.
Installation
Overview
An FAQ with a call to action in every answer for Svelte with Ark UI. A start-aligned header sits over six accordion rows that run from rail to rail under a rule with + marks, each with a ringed chevron at its end that fills in while the row is open. The open answer ends with the action that fits it: preview the booking page, read the rota guide, see the reminder options, download the security policy, start a free import, compare plans. The first answer's button is the block's one Shine Button and the others are outline buttons, so only one thing in the block asks for attention at a time. 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 and pricing pages where a question is the moment a visitor is ready for the next step.
FAQ
How do I change the actions?
Edit QUESTIONS at the top of the file: each entry has an id, the question, its answer, the label of the button in action and a primary flag. The button always reads action; its link is url, "#" until you set it, so give each question its own address there. Exactly one entry should have primary: true: that's the Shine Button, and the rest are outline buttons.
Why is only one button a Shine Button?
Because the first screen should have a single main action. The question that's open on load holds the Shine Button, so the button shows without a click; opening another question shows an outline button. If you open a different question on load, give it the primary flag instead.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer and its button render from the start, hidden until the question opens.
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. Enter or Space opens and closes it, and the button says whether it's expanded. A closed answer's button can't be reached with Tab, so Tab moves from question to question, and into an open answer's button only while it's open.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
How are the buttons built as links?
Each button's asChild receives its props: spread them onto your router's link.
Link text says where it goes, so keep labels specific ("Download the security policy", not "Learn more").
What moves, and what happens with reduced motion?
The header and rows fade up once on load, an answer eases open under its question, and the chevron turns over while it fills in. With reduced motion the entrances are off and the chevron swaps without turning. The answers also open and close at once, with no height animation.