Settings Panel

Settings page: section navigation, unsaved-changes bar, danger zone. Pro · Account and access › Profile and settings

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add settings-panel

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { SettingsPanel } from 'valyro-ui-pro';

Prop	Type	Default
`sections` *	`SettingsSection[]`		Sections in page order; each gets a navigation link.
`dirty`	`boolean`	`false`	There are unsaved edits: shows the sticky save bar.
`onSave`	`() => unknown`		Saves the edits (also on ⌘S / Ctrl+S). May return a promise; a rejection keeps the bar with an error.
`onDiscard`	`() => void`		Discard in the save bar: reset your form state here.
`activeSection`	`string`		Section highlighted in the navigation; follows scrolling unless controlled.
`defaultActiveSection`	`string`		Initial `activeSection` when uncontrolled.
`onActiveSectionChange`	`(id: string) => void`		Called with the new `activeSection` when it changes.
`stickyOffset`	`number`	`0`	Height of a sticky header above the panel (px), so the navigation and scroll targets clear it.
`title`	`ReactNode`		Page heading above the first section.
`description`	`ReactNode`		Text under the page heading.
`labels`	`Partial<SettingsPanelLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Profile Details — Profile: completeness, verified contacts, fields
Address Book — Address book: home, work, default addresses and actions
Social Profiles — Linked social profiles: reorder, verify, copy link
Two Factor Setup — Two-factor setup: method, QR code or phone, code verification
Active Sessions — Active sessions: current device, suspicious sign-ins, revoke access
Access Tokens — Personal access tokens: scope, last used, revoke
Age Gate — Age verification: date of birth, remember me, deny under the limit
Permission Matrix — Roles and permissions matrix: inheritance, locks, bulk toggles, draft changes
Audit Log — Activity log: filters, field diffs, CSV export, load more
Privacy Center — Privacy center: score, setting groups, protection counters
Support Center — Support: contact channels with status, tickets with filters