`<OrganizationProfile />`

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(opens in a new tab). 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 />
  )
}

organization-profile.tsx
import { OrganizationProfile } from "@clerk/clerk-react";
 
export default function OrganizationProfilePage() {
  return <OrganizationProfile />;
}

/pages/organization-profile/$.tsx
import { OrganizationProfile } from "@clerk/remix";
 
export default function OrganizationProfilePage() {
  return <OrganizationProfile />;
}

Properties

All props below are optional.

Name	Type	Description
`afterLeaveOrganizationUrl`	`string`	Full URL or path to navigate after leaving an organization.
`routing`	`'hash' \| 'path' \| 'virtual'`	The routing strategy for your pages.
`path`	`string`	The 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.
`appearance`	`Appearance \| undefined`	Optional 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.