UserProfile component is the fastest way to add user profile management to your application.
By default, Clerk hosts the component on your "accounts" subdomain, which you configure in production with a CNAME in your DNS records.
UserProfile component can also be mounted within your application.
To mount the
UserProfile component, first import it from our NPM package:
Then, place it anywhere in your JSX:
The mounted component uses hash-based routing by default. As the user navigates between different settings pages, the hash portion of the URL will update to reflect the current page.
With additional configuration, the mounted component can use path-based routing instead of hash-based routing.
First, ensure your
<ClerkProvider> component has its
navigate prop configured.
Then, add the
routing props to your
UserProfile component. Set
path to the path where the component renders:
Important: When using path-based routing, the component must render on
path and all of its subpaths.
For Next.js, use an optional catch-all route like
For React Router, use a wildcard path like