# <UserProfile /> component

The `<UserProfile />` component is used to render a beautiful, full-featured account management UI that allows users to manage their profile, security, and Billing settings.

## Example

The following example includes a basic implementation of the `<UserProfile />` component. You can use this as a starting point for your own implementation.

filename: src/App.tsx
```jsx
import { UserProfile } from '@clerk/electron/react'

function App() {
  return <UserProfile />
}

export default App
```

## Properties

All props are optional.

| Name                   | Type                    | Description                                                                                                                                                            |
| ---------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| additionalOAuthScopes? | object                  | Specify additional scopes per OAuth provider that your users would like to provide if not already approved. For example: {google: ['foo', 'bar'], github: ['qux']}. |
| appearance?            | Appearance | undefined | An object to style your components. Will only affect Clerk components and not Account Portal pages.                                                                    |
| customPages?           | CustomPage[]           | An array of custom pages to add to the user profile. Only available for the JavaScript SDK. To add custom pages with React-based SDK's, see the dedicated guide.       |
| fallback?              | ReactNode               | An element to be rendered while the component is mounting.                                                                                                             |
| path?                  | string                  | The path where the component is mounted on when routing is set to path. It is ignored in hash-based routing. For example: /user-profile.                               |
| routing?               | 'hash' | 'path'        | The routing strategy for your pages. Defaults to 'path' for frameworks that handle routing, such as Next.js. Defaults to hash for all other SDK's, such as React.      |

## Compose your own profile (experimental)

> This API is experimental and may undergo breaking changes. It is exported from `@clerk/ui/experimental` and is not covered by semantic versioning, so its components, names, and props are subject to change in future releases. It is recommended to [pin](https://clerk.com/docs/pinning.md?sdk=electron) the `@clerk/ui` version.

Rather than render the full `<UserProfile />` component, you can assemble your own account management page from smaller building blocks. Wrap them in a `<UserProfileProvider>` and render only the panels and sections you need, in whatever order suits your app.

The composable components are imported from `@clerk/ui`, which isn't included with your Clerk SDK — install it as a direct dependency:

```npm
npm install @clerk/ui
```

```tsx
import {
  UserProfileProvider,
  UserProfileAccountPanel,
  UserProfileProfileSection,
  UserProfileEmailSection,
  UserProfilePhoneSection,
} from '@clerk/ui/experimental'

export default function UserProfilePage() {
  return (
    <UserProfileProvider>
      <UserProfileAccountPanel>
        <UserProfileProfileSection />
        <UserProfileEmailSection />
        <UserProfilePhoneSection />
      </UserProfileAccountPanel>
    </UserProfileProvider>
  )
}
```

Rendering a panel without children renders its built-in page content, the same sections the default `<UserProfile />` renders on that page. The composed components don't include `<UserProfile />`'s navigation, so your app owns the layout and how users move between panels.

## Customization

To learn about how to customize Clerk components, see the [customization documentation](https://clerk.com/docs/electron/guides/customizing-clerk/appearance-prop/overview.md).

In addition, you also can add custom pages and links to the `<UserProfile />` navigation sidenav. For more information, refer to the [Custom Pages documentation](https://clerk.com/docs/electron/guides/customizing-clerk/adding-items/user-profile.md).

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)