shadcn.io is not affiliated with official shadcn/ui
Split Panel Shop Settings Form Block for Solid
Shop settings as three bands, each split into a label column and a fields column with its own Save and its own unsaved count, so saving one band never touches the others.
Installation
Overview
Let people save one part of a long settings page at a time, with this split panel form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. Three bands, each opened by a rule, split into a label column with a title and a sentence and a fields column: Shop details (a name, a Select for opening days and an about text), Billing contact (a name, an email and an optional tax number) and Alerts (three Switches). Every band is its own form with its own Save and its own unsaved count, so saving one never touches the others; only the first band's Save is the colored Shine Button, the other two are outline buttons. A band's foot says what is unsaved or what was saved, and one hidden polite line speaks the same result once. A refused save names the first problem in that band and focuses it. It's built from Input, Textarea, Select, Switch, Button, Shine Button and Guides, with a CSS entrance only. For settings pages, account pages and admin screens where each part saves on its own.
FAQ
How do the bands stay independent?
Each band is a separate form with its own draft, its own saved copy and its own change count (changesOf, billingChangesOf, alertChangesOf). Saving copies one draft into its saved state and says so in that band only, so the other bands keep their unsaved edits.
Why can Save be pressed with nothing changed?
Save is always shown and marked unavailable when the count is zero. Pressing it answers "No changes to save." instead of doing nothing, so a keyboard or screen reader user hears why.
Why is only the first Save colored?
A page has one primary action. The first band's Save is the Shine Button and the others are outline buttons; if a different band is the important one on your page, give it the Shine Button instead.
How does it look on a phone?
Each band stacks: the title and sentence first, then the fields, then the foot with its Save at full width.