shadcn.io is not affiliated with official shadcn/ui
Settings Header Navbar Block for Svelte
A two-row settings header: the page title and one real edit (a Weekly digest switch) with Discard and Save that wake up when it changes, and a row of section tabs where the dirty one carries a dot and a spoken note.
Installation
Overview
A settings header for Svelte with Ark UI, the top of a settings page in a scheduling platform called Knobly. The upper row holds the title and the workspace's name at the start and, at the end, the one thing being edited: a Weekly digest switch, then a line saying where the edit stands, a Discard button and a Save Shine Button. Both buttons are inert until something changes. Turning the switch off marks the General tab dirty (a dot, and a spoken "unsaved changes" in its name), wakes both buttons and sets the status to "1 unsaved change"; Discard puts the switch back and Save makes the new value the saved one, with "Saved in this demo" in the status. The lower row is the section tabs (General, Security, Billing, Notifications, API, Team) as links; the current one is foreground, medium weight and marked by a stroke on the bar's bottom edge. The header is 104 pixels tall (56 and 48), each row on its own spine. It is built from Switch, Shine Button, Button and Guides, with your theme's tokens for every colour. For settings and account pages where changes must be saved on purpose.
FAQ
How does the dirty state work, and how is it told without colour?
digest is the value shown and saved the value last saved; the edit is dirty while they differ. Dirty turns on three things at once: the General tab gets a small foreground dot plus the hidden words ", unsaved changes" in its name, Discard and Save become active, and the status reads "1 unsaved change". The dot is a shape, not a colour, and everything it says is also in text. Save and Discard never use the browser's disabled while focused: they are aria-disabled with a guarded handler, so focus stays on Save after you press it.
What does Save do?
It copies the shown value into saved and says "Saved in this demo": nothing is stored or sent. Replace save with your request and set the note after it settles (and an error state if it fails); discard puts the saved value back. The block's only edited field is the switch so there is something real to save; add your own fields to the state the same way.
How do I change the sections?
Edit SECTIONS (an id and a label each) and DIRTY_SECTION, the id of the tab that holds the edited field. The tabs are links with href="#": point them at your routes and derive the current one from your router. Choosing a tab marks it current and, on a phone, brings it into view.
How does it work with a keyboard and a screen reader?
The switch is named "Weekly digest" and says whether it is on (Space toggles it). The status line is a polite live region, so every change is announced: "1 unsaved change", "Saved in this demo", "Changes discarded". The tabs are links in a nav named Settings sections; the current one has aria-current="page", and the dirty one's name ends with "unsaved changes".
How does it work on a phone?
Below the sm breakpoint the digest label is hidden (the switch keeps its name) and Discard shrinks to an icon with the name "Discard changes"; below lg the status line is spoken but not shown. The tabs scroll sideways with a fade at each edge that can still scroll. Nothing wraps at 320 pixels.