<UserProfile />

The UserProfile component renders a complete user profile management interface where users can view and edit their personal information, change passwords, manage sessions, and more.

Usage

Basic Usage

src/ProfilePage.jsx

import { UserProfile } from '@asgardeo/react'

function ProfilePage() {
  return (
    <div>
      <h1>My Profile</h1>
      <UserProfile />
    </div>
  )
}

export default ProfilePage

Custom Appearance

src/ProfilePage.jsx

import { UserProfile } from '@asgardeo/react'

function ProfilePage() {
  return (
    <UserProfile 
      appearance={{
        elements: {
          card: { boxShadow: 'none' },
        },
      }}
    />
  )
}

export default ProfilePage

Props

Prop	Type	Required	Description
appearance	Appearance	❌	Customize component appearance
sections	string[]	❌	Which sections to show (defaults to all sections)