shadcn.io is not affiliated with official shadcn/ui
Settings Panel Sidebar Block for Ark UI
A settings area in a fixed-height window whose sidebar lists nine pages in three groups and marks each page you have edited with a dot until Save changes clears them all.
Installation
Overview
Keep track of unsaved settings with this settings panel sidebar for React with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Knobwell, an app's settings, with nine pages in three groups. The page holds a small real form, a text Input, a Who can change this Select and a Switch. Editing marks that page's row with a dot, named unsaved changes for screen readers, and the dot stays when you move to another page. The one button in the top bar, Save changes, submits the form through its form attribute and clears every dot. Built from Sidebar, Field, Input, Select, Switch, Shine Button and Guides, with a CSS entrance only. For settings areas with many pages and one save.
FAQ
How does a page become changed?
Any difference from the saved values on that page: the text, the select or the switch. Putting a value back to what was saved clears the dot. The edits are kept per page, so moving away does not lose them.
What does Save changes save?
Every changed page at once, not only the one on screen. The status line names how many pages and which. With nothing changed it says so and does nothing.
How do screen readers hear the dot?
The dot itself is hidden from them. The link's accessible name becomes, for example, Profile, unsaved changes, and the tooltip on the folded rail says the same.
What happens when the sidebar folds to icons?
The rail keeps the nine pages as icons with tooltips, and each changed page's tooltip says unsaved changes. The dots sit in the row's end and clip with the label, so unfold the rail to see them. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The values start from a typed object and Save only copies them in this window. Post the changed pages from the submit handler and keep the saved values from your server so a reload starts clean.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a page closes the sheet; the status line under the form says how many pages hold unsaved changes. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.