Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

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

Usage

You can embed the <OrganizationProfile /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application.

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

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.

What did you think of this content?

Clerk © 2023