# <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.

The `<UserProfile />` component must be embedded using the [TanStack Router catch-all route](https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#splat--catch-all-routes) in order for the routing to work.

filename: app/routes/user-profile.$.tsx
```tsx
import { UserProfile } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/user-profile/$')({
  component: UserProfilePage,
})

function UserProfilePage() {
  return <UserProfile />
}
```

## 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=tanstack-react-start) 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
```

> TanStack Start's Vite optimizer can pre-bundle `@clerk/ui/experimental` separately and inline a second copy of Clerk's React context, which surfaces as `useClerk can only be used within the <ClerkProvider /> component` on pages that render these panels. To force a single instance, add `@clerk/shared` as a direct dependency and update your `vite.config.ts`:
>
> filename: vite.config.ts
>
> ```ts
> export default defineConfig({
>   resolve: {
>     dedupe: ['react', 'react-dom', '@clerk/shared', '@clerk/react'],
>   },
>   optimizeDeps: {
>     include: ['@clerk/ui/experimental', '@clerk/shared/react'],
>   },
>   // ...plugins
> })
> ```

```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/tanstack-react-start/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/tanstack-react-start/guides/customizing-clerk/adding-items/user-profile.md).

---

## Sitemap

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