shadcn.io is not affiliated with official shadcn/ui
Privacy Controls Onboarding Block for Solid
A health app's privacy panel: four switches for analytics, tips, partner sharing and a public profile, and a data-flow figure in which each switch draws or removes a line to its destination, with a derived Shared with 2 of 4.
Installation
Overview
Show people where their data goes before they decide with this privacy panel for Solid with Ark UI. It belongs to Cloakhurst, a health-tracking app: four Switches (Product analytics, Personalised tips, Partner sharing, Public profile) at the start and, beside them, a drawn figure with you in one box and a destination box for each setting. Turning a switch on draws a line with an arrowhead to its box and the box reads Shared; turning it off removes the line and the box reads Not shared. The heading sums it up (“Shared with 2 of 4”) and the figure's caption says it in words. Share nothing turns every switch off. Save choices is the one Shine Button and stays quiet until something changed.
FAQ
How is the figure drawn?
From div boxes and rules: a grid with your box at the start, a line and a destination box per row. A line is on or off by class, with a short fade and no motion under reduced motion. The figure is always drawn left to right, even on a right-to-left page, and is hidden from assistive technology; its caption, which is real text, carries the same facts.
How do I change the settings and destinations?
Edit FLOWS. Each has an id, a title, a one-sentence hint and the to box name. Keep it to four or five so the figure keeps its height, and say in the hint what leaves the device, not what the setting is called.
How do unsaved changes work?
The switches change a draft; changesOf counts how many differ from what is saved, and the status line says “2 changes not saved yet.” Save choices keeps the draft, and with nothing changed it answers “No changes to save.” There is no automatic save, so a person always knows what is in force.
What stays local in the demo, and how do I wire it?
All of it: saving says so and sends nothing. In your app write the draft to your server in save, and enforce each choice there: a switch that is off must stop the data reaching its destination, not just hide the line.