Profile Settings

A profile editing form with avatar upload, name, email, bio, and save/cancel actions.

Overview

The ProfileSettings recipe provides a profile editing card with avatar upload, name, email, and bio fields. It handles form state internally and calls onSubmit with the updated data.

Profile

Manage your public profile.

Jane Cooper

jane@example.com

Display Name

Bio

Usage

import { ProfileSettings } from '@/recipes/profile-settings';

<ProfileSettings
  initialValues={{
    name: 'John Doe',
    email: 'john@example.com',
    bio: 'Software engineer',
    avatarUrl: '/avatars/john.jpg',
  }}
  onSubmit={(data) => updateProfile(data)}
  onCancel={() => navigate('/settings')}
  onAvatarChange={(file) => uploadAvatar(file)}
/>

API Reference

Prop	Type	Default	Description
`initialValues`	`ProfileData`	—	Current profile data
`onSubmit`	`(data: ProfileData) => void`	—	Save handler
`onCancel`	`() => void`	—	Cancel handler
`onAvatarChange`	`(file: File) => void \| Promise<string>`	—	Avatar upload handler
`isLoading`	`boolean`	`false`	Loading state
`error`	`string`	—	Error message
`className`	`string`	—	Additional CSS classes

ProfileData

interface ProfileData {
  name: string;
  email: string;
  bio?: string;
  avatarUrl?: string;
}

Notification Settings — For notification preferences
Account Settings — For password and account management