shadcn.io is not affiliated with official shadcn/ui
Settings Config Reviews Block for Solid
Display settings for a soap shop's review widget: four Switch rows, an order Select and a lowest-rating Select beside a live preview card that follows each change, with a Save button.
Installation
Overview
A review widget settings panel for Solid with Ark UI, for Teaselline, a fictional soap shop. A divider splits the section, with the live card at the start and the settings at the end; on a phone it reads header, card, settings. The settings are four Switch rows (show reviewer names, show the verified mark, show helpful votes, show dates), an Order Select (newest, highest rated or most helpful first), a Select for the lowest rating to list, and one Shine Button, Save settings. The card, framed with + marks, is the widget as a shopper would see it: the average and count of every sample review on top, then up to two reviews that change as you flip a switch or choose an order, and a caption that says how many of the matching reviews it lists. Saving says "Saved in this demo only", and "You have unsaved changes" shows until you do. An unseen copy holds the card's height, so no switch moves the page. It's built from Switch, Select, Field, Rating, Avatar, Shine Button and Guides.
FAQ
How do I use my own reviews and options?
Edit REVIEWS (each has a rating, an ISO date, helpful votes, a title, a body and a verified flag), TOGGLES, ORDER_ITEMS and MIN_ITEMS at the top of the file. The card's average and count are computed from every review in REVIEWS; the list is those at or above the chosen rating, sorted, cut to MAX_SHOWN. Dates show without a year and carry a time element.
Does the lowest-rating setting hide bad reviews?
It only chooses which reviews the card lists. The average and the count above the list always include every review, the caption says how many matched, and the card ends with a "Read all" line. Use a setting like this to keep a small widget short, never to make a product look better than its reviews say; trimming the average itself, or hiding the way to read everything, misleads shoppers.
Where do the settings go when I press Save?
Nowhere. Save copies the current choices into a second piece of local state so the "unsaved changes" line can go, and a polite status says it was saved in this demo. To keep them, send the six values (four booleans and two strings) from the save handler to your own settings endpoint.
How are the switches named for screen readers?
Each is named by its label ("Show reviewer names") through aria-label, and the visible text and hint beside it are hidden from the accessibility tree so the label isn't read twice. The checked state uses your theme's text colour, so the Shine Button stays the one primary control.
Why doesn't the card move when I flip a switch?
An unseen copy of the two tallest reviews, with every part switched on, sits in the same grid cell as the live list, and each review's text reserves three lines. The live list sits at the top of that cell, so hiding names or dates leaves the page where it is.