shadcn.io is not affiliated with official shadcn/ui
Settings Panel Work Style Block for Solid
A working-agreements section drawn as a settings panel: six agreements as rows with a drawn switch, the state in words and a line on why, in a tinted frame beside the title.
Installation
Overview
A working-agreements section for Solid with Ark UI. The title and a sentence sit at the start of a split divider that runs from the page's top rule to the foot of the block. At the end, a tinted frame holds a raised panel drawn like a preferences screen: six agreements as rows, each with its name, a switch drawn as a picture with its state written beside it ("On" or "Off"), and a muted line saying why the team keeps it that way. The header counts the agreements that are on from the same list. On a phone the panel stacks under the title. It's built from Guides, Frame and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page, a handbook or a careers page that shows how a team works, including what it decided not to do. The company and its agreements are invented for the example.
FAQ
Can a visitor flip the switches?
No, and they aren't switches to a screen reader either. Each one is a drawing, hidden from assistive technology, and the row says the same thing in words: the name, then "On" or "Off", then why. The panel only looks like settings; it's a list of facts about how the team works. If you want a visitor to compare their own habits, that's a different block.
How do I change the agreements?
Edit AGREEMENTS at the top of the file: each has a name, an on flag and a why. The count in the header is computed from the list, so it follows when you add a row or turn one off. A short list reads as a set, so keep it to six to eight.
What is the list's structure?
A definition list: each agreement's name is a term, and its state and its reason are its two descriptions, so a screen reader announces "Async by default, On, Updates are written down…". Rows are separated by hairlines drawn by the list itself.
What is the frame around the panel?
It's the catalog's Frame: a tinted shell with a small header row (the panel's name and a badge) around a raised panel. The raised panel is lighter than the page in a light theme and darker in a dark one, because it follows your tokens, with no dark scope.