Preferences

Edit profile details in compact settings rows and manage notifications. Install the block and connect its callbacks to your app.

Installable blockBase UILocal interactions

Try the whole flow

Live component
preferences.tsx

Preferences

Profile and notification settings.

The name shown in your workspace.

Used for account notifications.

Used for dates and reminders.

Usage

your-page.tsx

The example stores state locally while mounted. Connect onSave to your app’s persistence. PreferencesValue is exported for typed integration. Handle loading and server failures in your app before treating a save as permanent.

Installation

The block includes all its components, dependencies, helper, theme, and JZB UI design skill.

Terminal

Behavior & accessibility

  • Name and email validation prevents incomplete saves. Errors are connected to fields.
  • Save records the current values locally. Reset returns to the last save.
  • General and Notifications share parent state; changing tabs preserves edits.