Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<OrganizationProfile />

Organization Profile Example

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

<OrganizationProfile /> properties

All props below are optional.

NameTypeDescription
afterLeaveOrganizationUrlstringFull URL or path to navigate after leaving an organization.
routing'hash' | 'path' | 'virtual'The routing strategy for your pages.
pathstringThe path where the component is mounted when path-based routing is used.
For example, /create-org
This prop is ignored in hash- and virtual-based routing.
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.

How to use the <OrganizationProfile /> component

You can embed the <OrganizationProfile /> 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/organization-profile/[[...organization-profile]]/page.tsx
import { OrganizationProfile } from "@clerk/nextjs"; export default function OrganizationProfilePage() { return ( <OrganizationProfile routing='path' path="/organization-profile" /> ) }
/pages/organization-profile/[[...index]].tsx
import { OrganizationProfile } from "@clerk/nextjs"; export default function OrganizationProfilePage() { return ( <OrganizationProfile /> ) }

How to customize the <OrganizationProfile /> component

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.

Last updated on March 1, 2024

What did you think of this content?

Clerk © 2024