shadcn.io is not affiliated with official shadcn/ui
Rating FAQ Block for Solid
A reverse-split FAQ for a recipe app: seven rows that each show an average rating, with a one-to-five scale at the foot of every open answer and the header beside the rows.
Installation
Overview
A rated FAQ for Solid with Ark UI. The seven questions sit at the start and the header at the end, behind a split divider that runs from the page's top rule to the block's end; on a phone the header stacks above the rows. Every row carries a quiet average ("4.6 from 212"), and every open answer ends in a five-point scale, 1 to 5, with "Not helpful" and "Very helpful" under its ends. Choosing a number says "Thanks, 4 of 5", folds your rating into that row's average and into the overall figure under the header, and the chosen number turns to the text colour on the page colour (never the primary). Nothing leaves the page. It's built from Accordion, Segment Group and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For recipe, course and help-centre pages where a graded signal tells you more than a thumbs-up.
FAQ
How do I change the questions and the starting averages?
Edit QUESTIONS at the top of the file: each entry is an id, the question, its answer, the average before your rating and the count of people behind it. SCALE holds the points on the scale and OPEN_QUESTION names the row that's open on load. One answer is open at a time.
Add multiple to the Accordion to let several stay open.
How is the average worked out?
Your rating counts as one more vote: the new average is (average × count + your rating) / (count + 1), shown to one decimal, and the count goes up by one. Choosing another number replaces yours rather than adding a second vote, because every figure is computed again from the starting values. The overall figure beside the header is the same sum across all seven rows.
Is the rating saved anywhere?
No. Your ratings live in the component's state, keyed by question, so a reload clears them. To store them, call your own endpoint from the rate function: it already receives the question's id and the number.
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. The scale is one group of five radio buttons, named with the question and its two ends, so Tab lands on it once and the arrow keys move between the numbers. A polite status line reads "Thanks, 4 of 5" when you choose one.
An arrow key chooses the number it lands on.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
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, and search engines and server rendering see all seven.
How does it fit on a phone?
Below the lg breakpoint the header and the overall figure stack above the rows, which run from rail to rail under a rule with + marks. In a row the average drops under the question, and the scale and its thanks sit one under the other. The numbers are square 40-pixel buttons and nothing scrolls sideways at 320 pixels.