<UserProfile />

Usage

import { UserProfile } from "@better-auth-ui/heroui"

export function UserProfileDemo() {
  return (
    <div className="w-full">
      <UserProfile />
    </div>
  )
}

Set profile.name to false on AuthProvider to hide the display name field:

<AuthProvider authClient={authClient} profile={{ name: false }}>
  {children}
</AuthProvider>

The hidden name field is not validated or included in profile updates. Existing names remain unchanged. This option defaults to true and is independent of emailAndPassword.name, which controls sign-up only.

To hide the whole card when no additional profile fields are visible, also set avatar={{ enabled: false }}. Avatar-only cards keep their upload and delete actions without a separate save button.

Props