`<UserProfile />`

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

Usage

You can embed the <UserProfile /> component using the Next.js optional catch-all route(opens in a new tab). This allows you to redirect the user inside your application.

/app/user-profile/[[...user-profile]]/page.tsx
import { UserProfile } from "@clerk/nextjs";
 
const UserProfilePage = () => (
  <UserProfile path="/user-profile" routing="path" />
);
 
export default UserProfilePage;

/pages/user-profile/[[...index]].tsx
import { UserProfile } from "@clerk/nextjs";
 
const UserProfilePage = () => (
  <UserProfile path="/user-profile" routing="path" />
);
 
export default UserProfilePage;

/user-profile.tsx
import { UserProfile } from "@clerk/clerk-react";
 
const UserProfilePage = () => (
  <UserProfile path="/user-profile" routing="path" />
);
 
export default UserProfilePage;

routes/user/$.tsx
import { UserProfile } from "@clerk/remix";
 
export default function UserProfilePage() {
  return <UserProfile path="/user" routing="path" />;
}

Properties

All props below are optional.

Name	Type	Description
`appearance`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`routing`	`'hash' \| 'path' \| 'virtual'`	The routing strategy for your pages.
`path`	`string`	The path where the component is mounted on when path-based routing is used e.g. /sign-in.
`additionalOAuthScopes`	`object`	Specify additional scopes per OAuth provider that your users would like to provide if not already approved. e.g. `{google: ['foo', 'bar'], github: ['qux']}`.

Customization

To learn about how to customize Clerk components, see the customization documentation.

In addition, you also can add custom pages and links. For more information, refer to the Custom Pages documentation.