Profile Settings

Account Settings

A complete settings screen that handles profile editing, password changes, notification preferences, payment card management, FAQ, sign-out, and account deletion. Every row is individually toggleable, renameable, and navigatable - all without writing any custom logic.

Best forMain settings screens

Drop it on a dedicated settings screen and connect sign-out to your login screen.

Built-in modals5 inline flows

Edit profile, change password, notifications, FAQ, and add card all open inside the component with no extra screens required.

Live modePreview required

Edits, uploads, and sign-out only execute in preview or live runtime; they are no-ops in static builder view.

What it does

Six things worth knowing

Edit Profile modal

Lets the user update their name, email, phone, address, delivery notes, and payment label. Avatar upload supports both camera and photo gallery.

Change Password flow

Sends a verification code to the user’s email, then guides them through entering the code and setting a new password - no extra screens needed.

Notification preferences

A toggle sheet for push, email, and SMS notifications. State is persisted to the backend automatically.

Stripe card management

The Add Card row opens a Stripe Checkout session in an in-app browser. Requires Stripe to be configured in your app’s backend settings.

Sign-out and delete account

Sign-out clears the session and redirects to signOutScreenId. Delete account presents a two-step confirmation before permanently removing the user.

Unauthenticated state

When no user is signed in, the component shows Log In and Sign Up buttons linked to loginScreenId and signupScreenId instead of the settings rows.

Builder setup

Find it, drop it, wire sign-out

Where to find itAdd it to any screen

Component picker → Profile Settings → Account Settings.
Drop it on a dedicated settings or profile screen.
Pair with Profile Header at the top for a complete profile screen.

Before you publishFour things to wire up

Set signOutScreenId to your Login screen - this is the most important prop.
Hide rows you don’t need with the show* boolean props.
Set loginScreenId and signupScreenId to support unauthenticated users.
Set profileMode to match your app type - account or food-ordering.

Category: Profile SettingsComponent: BuilderAccountSettingsRegistry key: account-settingsTier: Free

Props

Profile mode, navigation, and labels

Every prop below is set directly in the property panel - no code needed. Start with profileMode to get the right description preset, then wire up the navigation screen IDs.

Prop	Default	Description
`profileMode`	`’account’`	`account` - “Update your name, email, phone, and address”. `food-ordering` - “Update contact details, delivery address, and order preference”.
`signOutScreenId`	`""`	Screen to redirect to after sign-out. Usually your Login screen.
`editProfileScreenId`, `changePasswordScreenId`	`""`	Link these rows to dedicated screens instead of the built-in inline modals.
`loginScreenId`, `signupScreenId`	`""`	Log In and Sign Up buttons shown to unauthenticated users.
`editProfileButtonText`, `signOutButtonText`, and others	Row-specific defaults	Rename any row label without touching code. Each row also has a matching `*Description` prop for the subtitle.
`sizeVariant`	`’medium’`	Responsive sizing preset - `small`, `medium`, or `large`.

Toggles & colours

Make it yours

Every row and colour below is yours to change. The defaults are a neutral starting point - hide rows you don’t need and adjust the palette to match the brand without touching anything else.

Prop	Default	What it controls
`showEditProfile`	`true`	Edit Profile row.
`showChangePassword`	`true`	Change Password row.
`showAddCard`	`true`	Add Card / Payment row.
`showNotification`	`true`	Notification row.
`showFAQ`	`true`	FAQ row.
`showTermsOfUse`	`true`	Terms of Use row.
`showSignOut`	`true`	Log Out row.
`showDeleteAccount`	`true`	Delete Account row.
`primaryColor`	Various	Icon and highlight colour.
`dangerColor`	Various	Delete Account row colour.
`backgroundColor`	Various	Outer background.
`textColor`, `secondaryTextColor`	Various	Primary and subtitle text colours.
`dividerColor`	Various	Row separator colour.
`avatarBorderColor`	Various	Avatar ring colour.

Tips

Common mistakes to avoid

Always set `signOutScreenId`

Without a destination screen, the Log Out button clears the session but leaves the user on the settings screen with no way forward. Link it to your Login screen.

Inline modals vs. dedicated screens

Edit Profile and Change Password open inside the component by default. Set editProfileScreenId or changePasswordScreenId if you want a full dedicated screen instead.

Stripe requires backend configuration

The Add Card row opens a Stripe Checkout session. It will not function unless Stripe is configured in your app’s backend settings.

Profile Header stays in sync

When a user saves changes in the Edit Profile modal, Profile Header (if present on the same screen or elsewhere in the app) updates automatically via the profile subscription.

We’re almost ready.