shadcn.io is not affiliated with official shadcn/ui
Changelog Preferences Settings Block for Solid
A changelog email panel of subscription cells on shared hairlines, one per product area with its release strip and a Follow toggle, a delivery choice, locked breaking changes and a computed email volume.
Installation
Overview
Let customers choose which product news reaches their inbox, with this changelog preferences panel for Solid with Ark UI. Inside a hairline frame with a plus mark on each corner, six cells share their lines in a grid: one for each product area (API, Dashboard, Mobile, Billing, Docs, Integrations) with what it shipped in the last 90 days, a small strip drawing each of its releases on that window, and a Toggle to follow it. Below them a Segment Group picks how updates arrive (each release, a daily digest or a weekly digest), a locked Switch says breaking changes always arrive, and one sentence says what that amounts to ("About 2 emails a month, plus any breaking change as it ships"). It is worked out from the release dates the strips draw, so following another area or switching from weekly to each release moves the number. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them; both stay in place and focusable while there is nothing to do. On a phone the cells stack in one column and the save bar stays pinned to the bottom of the screen. It's built from Toggle, Segment Group, Switch, Button, Shine Button and Guides, with a CSS entrance only. For a changelog or release-notes page, a product's notification centre or a settings screen.
FAQ
How do I fill it with my own product areas?
Edit AREAS. Each area has an id, a name and its releases in the 90 days before the page's "today": the ISO day each shipped and how many changes it held. Every count on a cell, the strip of release marks and the email volume are worked out from those, so a change is typed once. Move START (the first day the strips draw) when you refresh the data, and SAVED, the areas followed and the delivery the account has stored when the page opens, to the person's real settings.
How is the number of emails worked out?
It counts what the last 90 days would have sent to someone who followed the chosen areas, then divides by three months. With "Each release" every release is one email; with "Daily digest" releases on the same day share one; with "Weekly digest" releases in the same Monday-to-Sunday week do. The result is rounded and never less than one while you follow something, and the breaking changes are said to arrive on top. It is an estimate from the past, not a promise, and the sentence says "About" for that reason.
Why can't I turn off breaking changes?
Because a notice that something stops working is the one email nobody should miss. The switch is shown on and disabled with a lock beside it, and its line says why. If your product lets people opt out, make it a normal switch and keep its state with the other settings.
What happens when I press Save, and what stays local?
Nothing leaves the page. The block keeps two copies of the settings, the saved one and the one being edited, and counts how many settings differ, so the status line can say "2 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. To make it real, send the edited copy to your API in the save handler and update the saved copy from the response, showing the error in the same status line if it fails. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus; pressing one then says there is nothing to do.
How does the Follow toggle announce itself?
Each toggle is a button that is pressed or not, named for its area ("Follow API changes"), so a screen reader says "pressed" once you follow it. The visible word stays "Follow" and a check replaces the plus, so the button never changes width or its name. The count above the cells ("2 of 6 followed") and the sentence below follow every press, and the strip under each name is decoration, with the same facts written beside it as "11 changes in 5 releases, last 90 days".
How does it look on a phone?
Below the small breakpoint the six cells stack in one column, then two columns until the medium breakpoint and three from there, always on shared hairlines. The delivery choice fills the width and its three segments share it. The strips are drawn left to right in every language, since time on them runs one way.