shadcn.io is not affiliated with official shadcn/ui
Pricing Plans FAQ Block for Solid
A plan-aware FAQ for an e-signature tool: a full-width plan picker over six questions whose closed rows and open answers show the chosen plan's limits.
Installation
Overview
A plan-aware FAQ for Solid with Ark UI. A start-aligned header sits over a band under a rule with + marks that holds a full-width plan picker, a segmented control with three plans (Free, Pro, Team), and six accordion rows follow. Picking a plan tailors every answer without changing its wording: each closed row shows the chosen plan's headline value at its end ("100 a month", "2 years", "Unlimited"), and each open answer carries a short list of that plan's numbers, such as envelopes, seats, history and storage. Only values change, so the rows keep their height and nothing moves. There are no prices: those belong on your pricing page, and this block answers what each plan includes. 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 Segment Group, Data List, Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For pricing pages and billing help where the honest answer to "how many?" is "it depends on your plan".
FAQ
How do I change the plans and the numbers?
Edit PLANS for the plan names and QUESTIONS for the rows: each question has an id, the question, its answer, a headline and a list of facts. A headline and every fact's values hold one string per plan, in the order of PLANS, so adding a plan is one name and one more value in each list. The picker, the row ends and the lists are all built from that data; the answer text never changes with the plan.
Why doesn't the page move when I pick a plan?
Only values change: the wording of every question and answer is fixed, the row end reserves a minimum width, and every fact has a value for every plan, so a row never gains or loses a line because of the picker. Keep each value short, a few words, so it stays on one line at your narrowest width.
Does the picker announce the change?
The picker is a segmented control with a name ("Plan"); one plan is always selected, and the arrow keys move between plans. A polite live region says "Answers show the Pro plan" when the choice changes. Focus stays on the picker, and the open answer's list says which plan it shows ("On Pro"), so the answer is never ambiguous.
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 row opens, with the numbers of the chosen plan.
How does it work with a keyboard and a screen reader?
Each row is a button inside its own h3 under the section's h2, and its name includes the headline value for the chosen plan. Enter or Space opens and closes it.
The Up and Down arrows also move between rows, and Home and End jump to the first and last.
The numbers in each open answer are a real description list, so a screen reader reads every label with its value.