Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

<UserProfile />

A full-featured account management component

Overview

The <UserProfile/> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings. Learn more about the <UserProfile/> component, what it does, and how it is used by reading our User Profile component guide.

Embedding a <UserProfile /> component

Using the Next.js optional catch all route, you can embed the <UserProfile/> component. This allows you to redirect the user inside your application and handle any redirects.

1

Props

NameTypeDescription
appearance?object

Controls the overall look and feel.

routing?RoutingStrategy

The routing strategy for your pages. Supported values are:

-hash (default): Hash based routing.

-path: Path based routing.

path?string

The path where the component is mounted when path-based routing is used.

-e.g. /user-profile. This prop is ignored in hash-based routing.

hideNavigation?boolean

Hides the default navigation bar. Can be used when a custom navigation bar is built.

only?string

Renders only a specific page of the UserProfile component. Supported values are:

  • account: User account page.
  • security: User security page.

Custom Styling

The <UserProfile/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.

Localization

The <UserProfile/> component can be localized using the localization prop. This allows you to customize the language used within the <UserProfile/> component.

Was this helpful?

Clerk © 2022