Layout
v1.0.0Added in 1.0.0
A settings area like macOS and iOS: a section nav, grouped label and control rows, and a save bar that slides up when something changes.
Pick a section in the sidebar (Up / Down move between items, Home / End jump, Enter opens; disabled items are skipped) and its page fades in at the top while the indicator glides over. Change anything and a dark bar slides up from the bottom: "You have unsaved changes · Discard · Save". Save with the button or mod+s (Cmd+S / Ctrl+S, bound only while there is something to save, even inside a text field): the button spins, then the bar says "Changes saved" for a moment and slides away; a failed save keeps the bar, shakes it and shows the error. Escape inside the bar does nothing, so discarding is always a deliberate click. Switching sections with unsaved changes asks first (Discard / Keep editing; in the tabs, arrow keys then only move focus and Enter or Space switches), and closing the tab warns too. In scroll mode every section sits on one page, the nav follows your scroll and a click glides to the section, below the sticky tabs when there are tabs. Below 768px (the layout's own width) the nav becomes an iOS grouped list: tap a row to push its page, then tap the back button, press Escape or swipe the page to the right to go back; or sticky scrolling pill tabs, or a select whose bottom sheet shows the same groups. On a phone the bar pins above the tab bar and the safe area, lifts over the on-screen keyboard and never covers the last row. Rows bind their label to the control, so tapping "Daily digest" flips its switch.
npx wingo-ui@latest add settings-layoutPro item: the CLI needs a Pro account. See plans
Your account and the data of Acme Software SRL
How teammates see you in comments and approvals.
JPG or PNG, at least 256 × 256 px.
Where you get invoices and the daily digest.
saveShortcut="mod+s" · confirmLeave=true · warnBeforeUnload=true · dirty=false